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
Post a Comment