Question

我有以下关键帧：

@-webkit-keyframes spin {  
from {  
    -webkit-transform: rotate(0deg);
}  
to {  
    -webkit-transform: rotate(360deg);  
}}

这里引用的是：

-webkit-animation-name: spin; 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 3s;

这基本上只是模仿旋转的乙烯基。它在桌面浏览器上看起来很完美但我在iPhone上的Safari和Chrome上都注意到右上角有一些闪烁。我已经尝试了一些其他的解决方案，但我没有运气。任何帮助都会很棒。

修改

元素的CSS：

#vinyl {
    background-image: url(../img/vinyl_vector.png);
    width: 2140px;
    height: 2140px;
    background-size: cover;
    background-position: center center;
    -webkit-animation-name: spin; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear;
    -webkit-animation-duration: 3s;

    position: absolute;
    top: -1700px;
    left: 50%;
    margin-left: -1070px;
    z-index: 1;
    overflow: hidden;
}

Answer 1

我刚刚通过将背景图片变成了一个孩子来解决这个问题＆＃34; img＆＃34; #vinyl。不知道为什么会发生这个问题！

@ -webkit-keyframes使用-webkit-transform和rotate闪烁

1 个答案: