@keyframes 변환 : 회전() Chorme에서 작동하지 않는, 사파리

Question

이 코드는하지만 크롬이나 사파리, 파이어 폭스에서 잘 작동한다 - 그것은 단지의

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를 사용하고 있지만 + keyframes mixin에는 일부 브라우저 접두사가 포함되어 있지 않으므로 모든 것을 손으로 작성했습니다. < 그리고 아직 Chrome 및 Safari에서 작동하지 않습니다.

Answer 1

나는 이것이 정말로 오래되었다는 것을 알고 있지만 누구나이 문제로 끝나면 "to/from"을 "0 %/100 %"로 대체하여 해결할 가능성이 높습니다.이 동일한 문제가 있었고 발견되었습니다. 그 사파리는 특히 to and from 지정을 좋아하지 않았습니다. 0 %와 100 %로 변경하면 더 이상 변경하지 않고도 문제를 해결할 수 있습니다.