CSS3 animation with keyframes

Question

I make a css3 animation with key frames. But i have a problem. This is my code:

a[title*="in je favorieten"]:hover {
    -moz-animation-duration: 1s;
    -webkit-animation-duration: 1s;
    -moz-animation-name: slidein;
    -webkit-animation-name: slidein;
    -moz-animation-iteration-count: 3;
    -webkit-animation-iteration-count: 3;
    -moz-animation-direction: alternate;
    -webkit-animation-direction: alternate;
}

@-moz-keyframes slidein {
    from {
        width: 25px;
    }

    to {
        width: 80px;
    }
}

@-webkit-keyframes slidein  {
    from {
        width: 25px;
    }

    to {
        width: 80px;
    }
}

The problem is. When i hover the a element. The a element must be set to width 80. When i hover out. Than the a element must be return to 25 width. But now, i hover and he does the animation. And than he return to 25. How can i fix this?

Thanks!

Answer 1

What you want is not a good idea to be implemented via animations ,

Try using CSS3 transitions [support is the same ]

Here is the sample code

a{ 

 display:inline-block;
 width:25px;
 -moz-transition: width 1s; // Mozzilla
 -webkit-transition: width 1s; // Webkit
 transition: width 1s; // W3C
}

a:hover{
 // with a simple trickary this can be used to generate the same results what you want.
  width:100px;
}

And if u still want to follow the animation thing

Just add a rule saying

 a[title*="in je favorieten"]{
-moz-animation-duration: 1s;
-webkit-animation-duration: 1s;
-moz-animation-name: slideout;
-webkit-animation-name: slideout;
-moz-animation-iteration-count: 3;
-webkit-animation-iteration-count: 3;
-moz-animation-direction: alternate;
-webkit-animation-direction: alternate;
 }


 @-moz-keyframes slideout {
    from {
        width: 80px;
     }

     to {
        width: 25px;
     }
   }

@-webkit-keyframes slideout  {
    from {
        width: 80px;
     }

    to  {
       width: 25px;
   }
}

Answer 2

except that approach is not correct either... you should stick to transition as Abhishek wrote at first.

For CSS3 animations with keyframes you should check the specs. What your code basically says is "do the animation specified in 'slidein'/'slideout' 3 times in a row with alternating direction (left to right / right to left)".

Remove the following 3 lines and include Abhishek's code to make it work (better)

-moz-animation-iteration-count: 3;
-webkit-animation-iteration-count: 3;
-moz-animation-direction: alternate;
-webkit-animation-direction: alternate;

though this might still cause the layer to flicker from being shown to being not shown upon loading the page (did not test that)

reference: http://www.w3.org/TR/css3-animations/#animation-iteration-count