html - CSS3 Transistion not worked properly in safari 3.1.7 -


i have page element css3, want transit image left right fadeout.

it works in chrome, firefox, ie, op, not in safari 5.1.7 windows.

any highly appreciated.

js fiddle link

html

<li class="product">      <div class="image"><img src="http://elektronika.techtestbox.com/images/product.png"></div>      <span>products</span> </li> 

css

.product .image img {   animation:fadeoutright 5s linear infinite;   -moz-animation: fadeoutright 5s linear infinite;     -webkit-animation: fadeoutright 5s linear infinite;   -o-animation: fadeoutright 5s linear infinite; }  @-webkit-keyframes fadeoutright {   0% {     opacity: 1;   }    100% {     opacity: 0;     -webkit-transform: translate3d(100%, 0, 0);             transform: translate3d(100%, 0, 0);   } }  @keyframes fadeoutright {   0% {     opacity: 1;   }    100% {     opacity: 0;     -webkit-transform: translate3d(100%, 0, 0);             transform: translate3d(100%, 0, 0);   } } 

js fiddle link

try this...

@-webkit-keyframes fadeoutright {   0% {     opacity: 1;   }    100% {     opacity: 0;     -webkit-transform: translate(100px, 0px);             transform: translate(100px, 0px);   } } 

translate3d problem windows safari..

demo link: http://jsfiddle.net/5a1q8sen/2/


Comments

Popular posts from this blog

java - Plugin org.apache.maven.plugins:maven-install-plugin:2.4 or one of its dependencies could not be resolved -

Round ImageView Android -

How can I utilize Yahoo Weather API in android -