CSS3 - Transition with animation? - css

Question

Here I have an animation that makes a blinking border next to the title you're hovering on:
#link_list a:hover {
border-left: 10px solid #E3E3E3;
animation: blink 1s infinite;
-webkit-animation: blink 1s infinite;
-moz-animation: blink 1s infinite;
-o-animation: blink 1s infinite;
animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
}
#keyframes blink {
0% { border-left: 10px solid rgba(215, 215, 215, 1); }
50% { border-left: 10px solid rgba(215, 215, 215, 0); }
100% { border-left: 10px solid rgba(215, 215, 215, 1); }
}
Now, the problem is that the transition doesn't support the animation.
I already fixed it for the transition-in with the animation-delay property, but the transition-out doesn't work because the animation is running.
FIDDLE

Answer 1

This is a bit of a hack way to do this, but you can accomplish the effect you are looking for with positioning.
Basically, instead of setting the border width to be 0px when the links are not being hovered, set the width to 10px (the same as onHover) and use relative positioning to move the element to the left 10px, as if the border is not there.
Then set the animation of the left property to be 0.2s ease and set left: 0 in the :hover state.
#link_list a{
border-left: 10px solid transparent;
transition: border-left 0.2s ease, border-bottom 0.2s ease, border-right 0.2s ease, left 0.2s ease;
position: relative;
left: -10px;
}
#link_list a:hover {
left: 0px;
}
With this, you can remove the transition-delay as well.
JSFiddle

Answer 2

You should use left: -10px; property instead of transition-delay: 0.2s; animation properties, add this properties into things #link_list a{ },
Check this Demo jsFiddle
CSS
#link_list a{
color: inherit;
text-decoration: none;
border-left: 0px solid transparent;
border-width: 0px;
transition: border-left 0.2s ease, border-bottom 0.2s ease, border-right 0.2s ease;
left: -10px; // ADD THIS NEW
}