Targeting specific property for transition delay - html

Question

I am using the following CSS to animate features of a div. .shrink gets added to .header through Java
.brand, .brand:visited, .brand:hover {
display: block;
position: relative;
height: 100px; width: 100px;
margin-top: 25px;
background: url('img/logo.png') no-repeat center center;
background-size: contain;
border: 1px solid #fff;
border-radius: 50%;
-webkit-transition: height 0.35s ease, width 0.35s ease, margin 0.35s ease, border-color 0.35s ease;
-moz-transition: height 0.35s ease, width 0.35s ease, margin 0.35s ease, border-color 0.35s ease;
-ms-transition: height 0.35s ease, width 0.35s ease, margin 0.35s ease, border-color 0.35s ease;
-o-transition: height 0.35s ease, width 0.35s ease, margin 0.35s ease, border-color 0.35s ease;
transition: height 0.35s ease, width 0.35s ease, margin 0.35s ease, border-color 0.35s ease;
}
header.shrink .brand {
margin: 0; padding: 0;
height: 80px; width: 80px;
border-color: transparent;
}
I want to put a 0.35s delay on JUST the border-color transition. Not sure the proper notation so that it wont affect all values.
ALSO, is there a way to only have the delay applied in one direction? Meaning that I would like the delay to be applied when the border shows up, but no delay when it goes transparent.

Answer 1

Question 1 - How to add a delay of 0.35s only to border-color property transition?
It is very simple. Just add a delay in the last part of the comma separated values that is provided to the transition property (that is, the one for border-color) alone. In the shorthand when two time values are provided, the first would be considered as the duration and the second as the delay.
transition: height 0.35s ease,
width 0.35s ease,
margin 0.35s ease,
border-color 0.35s 0.35s ease; /* notice how the delay is added here alone */
Question 2 - How to add a delay only when border shows up (on hover)?
Again very simple, add two transition settings - one for the default selector and one for the :hover selector. In the one that is within :hover selector, add the delay because it applies when the border shows up and in the transition within the default selector do not provide any delay.
.brand {
display: block;
position: relative;
margin: 0;
padding: 0;
height: 80px;
width: 80px;
background: url('http://lorempixel.com/100/100') no-repeat center center;
background-size: contain;
border: 1px solid transparent;
border-radius: 50%;
transition: height 0.35s ease, width 0.35s ease, margin 0.35s ease, border-color 0.35s ease;
}
.brand:hover {
height: 100px;
width: 100px;
margin-top: 25px;
border: 1px solid #f00;
transition: height 0.35s ease, width 0.35s ease, margin 0.35s ease, border-color 0.35s 0.35s ease;
}
<div class='brand'></div>