html - CSS3 animation different on chrome and others -



html - CSS3 animation different on chrome and others -

here in fiddle illustration of problem i'm facing. animation has different behavior in different browsers. need create work chrome. tested on chrome , firefox.

html:

<div class='wrap'> <div class='animate'></div> </div>

css:

@keyframes test { 0% { left: 0; right: inherit; width: 0; } 10%{ width: 100%;} 49%{ width: 100%;} 59% { left: inherit; right: 0; width: 0; } 100% { width: 0;} } @-webkit-keyframes test { 0% { left: 0; right: inherit; width: 0; } 10%{ width: 100%;} 49%{width: 100%;} 59% { left: inherit; right: 0; width: 0; } 100% {width: 0;} } .wrap{ height: 10px; position: relative; width: 100%; } .animate{ background: #000; height: 10px; position: absolute; top: 0; -webkit-animation: test 6s infinite; animation: test 6s infinite; }

you can utilize solution jsfiddle.net/vvgmr/2 - 1 css rule animated here , works. tested on ie10, latest firefox, opera , chrome

@keyframes test { 0% {left: -100%;} 10% {left: 0;} 49% {left: 0;} 59% {left: 100%;} 99.99% {left: 100%;} 100% {left: -100%;} } @-webkit-keyframes test { 0% {left: -100%;} 10% {left: 0;} 49% {left: 0;} 59% {left: 100%;} 99.99% {left: 100%;} 100% {left: -100%;} } .wrap{ height: 10px; position: relative; width: 100%; overflow: hidden; } .animate{ background: #000; height: 10px; position: absolute; top: 0; width: 100%; -webkit-animation: test 6s infinite; animation: test 6s infinite; }

html css3 google-chrome animation

Comments

Popular posts from this blog

php - Android app custom user registration and login with cookie using facebook sdk -

django - Access session in user model .save() -

php - .htaccess Multiple Rewrite Rules / Prioritizing -