CODEWITHSUNDEEP
htmlcsscss-animations
mcmwhfy
mcmwhfy

Reputation: 1686

animate from left to right and right to left

I have a problem with css3 animate; I have two animations : one on top and one on bottom. The top animation will load from 0 width to 100% and it works great but the second animation should load from 0 to 100% width from right to left and is not working :( Can someone explain me why ? here is my fiddle exaple:

.left-to-right {animation:myfirst 1s ease;}
.right-to-left {animation:mysecond 1s ease;}

@keyframes myfirst {
  0%   {width:0; margin-left:100%;}
    100% {width: 100%; margin-left: 0;}
}
@keyframes mysecond {
  0%   {width:100%; margin-left: 0;}
    100% {width: 0; margin-left:100%;}
}

Upvotes: 1

Views: 170

Answers (1)

web-tiki
web-tiki

Reputation: 103810

You made a mistake on the margins for the second animation. You can remove them :

DEMO

@keyframes mysecond {
    0%   {width:0;}
    100% {width: 100%;}
}

Upvotes: 3

Related Questions