CSS transitions delaying - html

Question

I discovered CSS transitions this morning on StackOverflow (I'm a newer web developer, mind you.) and I was trying to re-vamp one of the sites that I'm currently building, by adding a nice fade-in effect on my link color changes & my div hover effects on my page. The effect works very nicely, but I'm noticing a weird delay that hopefully someone can help me out with.
The Problem: When I have nested elements that should both receive a transition, they aren't happening simultaneously, they are waiting for the parent transition to stop and then the child transition begins.
HTML: Note - This is razor text normally, but I have provided the raw HTML without any C# syntax
<div class="image-caption">
<h1>Heading</h1>
<p>Hello world, I am an example paragraph.</p>
<a href="#" target="_self">
<div class="image-link">
Link Text!
</div>
</a>
</div>
CSS / LESS:
I was looking for a way to quickly convert all div & link effects on my site to fade smoothly. I found the code below on StackOverflow and noticed that if I didn't include the :hover & :focus selectors, that all of the links on the page would transition from a pretty large size down to their normal size when the page loaded which looked funny.
div, a, i{
&:hover, &:focus {
-o-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
}
}
And here is the code for the actual styling of the caption.
.image-caption {
//irrelevant CSS removed here
a {
&:hover, &:focus{
color: rgba(19, 56, 97, 1.0);
.image-link{
border-color: rgba(19, 56, 97, 1.0);
}
}
}
}

Answer 1

Use transition property directly on selectors (not on hover and focus states)
div, a, i {
-o-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
}

Answer 2

I was able to make it work by removing the DIV declaration on the global DIV / I / A transition rule, and then creating a couple of mixins to handle independent transition cases like this.
New Global Rule & Mixins:
a, i {
&:hover, &:focus {
-o-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
}
}
.no-fade() {
-moz-transition: none;
-o-transition: none;
-webkit-transition: none;
transition: none;
}
.make-fade() {
-o-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
}
New CSS / LESS to fade nests at the same time: - (for clarification, .image-link is a DIV)
a {
font-family: 'Source Sans Pro';
color: #FEFEFE;
text-transform: uppercase;
font-size: 18px;
&:hover, &:focus {
color: rgba(19, 56, 97, 1.0);
.no-fade();
.image-link {
.make-fade();
border-color: rgba(19, 56, 97, 1.0);
}
}