Question

我有一个CSS3的页面元素，我希望从左到右的过渡图像有淡出。

它可以在Chrome，Firefox，IE，OP中完美运行，但在Safari 5.1.7窗口中无效。

非常感谢任何帮助。

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

Answer 1

试试这个......

@-webkit-keyframes fadeOutRight {
  0% {
    opacity: 1;
  }

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

translate3d windows safari的一些问题..

演示链接： http://jsfiddle.net/5a1q8sen/2/

CSS3 Transition在safari 3.1.7中无法正常工作

1 个答案: