html - animate from left to right and right to left -


i have problem css3 animate; have 2 animations : 1 on top , 1 on bottom. top animation load 0 width 100% , works great second animation should load 0 100% width right left , not working :( can explain me why ? here 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%;} } 

you made mistake on margins second animation. can remove them :

demo

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

Comments

Popular posts from this blog

javascript - RequestAnimationFrame not working when exiting fullscreen switching space on Safari -

Python ctypes access violation with const pointer arguments -