CODEWITHSUNDEEP
csscss-animations
SakerONE
SakerONE

Reputation: 139

css-animations/animation-direction/reverse

#div {
position: absolute; top: 50px;
width: 100px; height: 100px; background: blue;
    -webkit-animation-name: shift;
    -webkit-animation-duration: 10s;
    -webkit-animation-iteration-count: 2;
    -webkit-animation-direction: reverse;
  }
 @-webkit-keyframes shift{
    from{
        top: 50px;
        left: 0px;    
    }
    20% {
        top: 150px;
        left: 100px;
    }
    to {
        top: 400px;
        left: 300px;
    }   
 }

http://jsfiddle.net/uVv65/2/ why do the reverse animation-direction is the same as normal? I thought it would go from

top: 400px;
left: 300px;

to 

top: 50px;
left: 0px;

Upvotes: 0

Views: 4593

Answers (3)

Mo.
Mo.

Reputation: 27465

The animation-direction property defines whether or not the animation should play in reverse on alternate cycles.

try this one

-webkit-animation-direction:alternate; /* Safari and Chrome */
        animation-direction:alternate;

Upvotes: 0

randallu
randallu

Reputation: 51

"reverse" wasn't a direction until quite recently. "alternate" has always been a direction, though, so to implement "reverse" folks would make the iteration-count be 2, and then give the animation a negative start offset of one iteration (-10s in your case) so that the animation would start on the "alternated" section. Hopefully "reverse" percolates down to browsers soon!

Upvotes: 5

Starx
Starx

Reputation: 78981

There is another way to do this too.

@-webkit-keyframes shift{
    from{
        top: 50px;
        left: 0px;    
    }
    10% {
        top: 150px;
        left: 100px;
    }
    50% {
        top: 400px;
        left: 500px;     
    }
    to {
        top: 50px;
        left: 0px;
    }   
 }

Demo

Upvotes: 1

Related Questions