Question

此代码在firefox中运行良好，但不适用于chrome或safari - 它只是一个简单的旋转图像......

img.spinner
    z-index: -1000
    margin: 0
    padding: 0
    width: 205px
    position: relative
    top: -315px
    left: -2px
    &:hover, &:active, &:focus
      outline: 0
      a
        outline: 0
    animation-play-state: running
    animation: spin 12s linear infinite

@keyframes spin
  from
    transform: rotate(0deg)
  to
    transform: rotate(360deg)
@-moz-keyframes spin
  from
    -moz-transform: rotate(0deg)
  to
    -moz-transform: rotate(360deg)
@-ms-keyframes spin
  from
    -ms-transform: rotate(0deg)
  to
    -ms-transform: rotate(360deg)
@-o-keyframes spin
  from
    -o-transform: rotate(0deg)
  to
    -o-transform: rotate(360deg)
@-webkit-keyframes spin
  from
    -webkit-transform: rotate(0deg)
  to
    -webkit-transform: rotate(360deg)

这只是一个简单的旋转，我使用指南针和sass，但+关键帧mixin不包括一些浏览器前缀，所以我已经手工编写了全部＆gt;。＆lt;它仍然无法在Chrome和Safari中运行。

Answer 1

我知道这真的很老了，但是如果有人在这里遇到这个问题，很可能通过用“0％/ 100％”替换“to / from”来修复我有同样的问题并发现野生动物园尤其不喜欢往返指定。更改为0％和100％修复了问题，无需进一步更改。

@keyframes变换：rotate（）无法在Chrome，Safari中使用

1 个答案: