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.
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); } }
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
Post a Comment