Question

CSS Transitions在safari中工作，但在导航到另一个页面后，当你回到带有动画的页面时，它不起作用，你需要清除缓存以使其再次工作。

出了什么问题？

这是代码和小提琴链接，它在JSFiddle中工作，但是当应用到网站时，我们遇到了问题。

HTML

<a class="prevtest" href="javascript:void(0);">Test</a>

CSS

.prevtest {display: block; background: url('http://www.scadmoa.org/sites/all/themes/scadmoa/images/thin-blue-right-arrow.png') no-repeat right center; width: 100%; }

.prevtest {
  background-position: 34px center;
  -webkit-transition: background-position 0.4s linear;
  -moz-transition: background-position 0.4s linear;
  -o-transition: background-position 0.4s linear;
  transition: background-position 0.4s linear;
}

.prevtest:hover {
  background-position: 40px center;
  -webkit-animation: animatedBackground 0.4s linear;
  -moz-animation: animatedBackground 0.4s linear;
  -o-animation: animatedBackground 0.4s linear;
  animation: animatedBackground 0.4s linear;
}

@-webkit-keyframes animatedBackground {
  0% { background-position: 34px center; }
100% { background-position: 40px center; }
}
@-moz-keyframes animatedBackground {
  0% { background-position: 34px center; }
100% { background-position: 40px center; }
}
@-o-keyframes animatedBackground {
  0% { background-position: 34px center; }
100% { background-position: 40px center; }
}
@-ms-keyframes animatedBackground {
  0% { background-position: 34px center; }
100% { background-position: 40px center; }
}
@keyframes animatedBackground {
  0% { background-position: 34px center; }
100% { background-position: 40px center; }
}

小提琴：http://jsfiddle.net/fyxj3rca/2/

CSS转换停止工作 - SAFARI

0 个答案: