Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS3 - Transition with animation?

CSS3 - Transition with animation?

Problem

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

Problem courtesy of: Claudio

Solution

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

Solution courtesy of: David

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS3 - Transition with animation?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×