旋转变换无法在媒体查询

Question

我有一个旋转动画，我象征着正在加载的东西。这很好用（除了它不会连续旋转，它有点在360度左右时停止一些），但在某些手机上（我有一个Android注释4）它根本不旋转。然后在其他人（iphone）上，我的圆圈实际上会像摆动一样旋转，或者固定在圆圈的一个角落，然后从那个轴旋转。

我的代码中有webkits，我将img设置为：

#spinning-circle img {
  width: 100%;
  height: auto;
}

为什么我的形象会做这些事情。如果你想在移动环境中看到它，我可以给网址直播。

#spinning-circle-container {
  float: left;
  width: 40%;
  background: red;
  padding: 140px 0 0 10%;
}

#spinning-circle {
  animation-name: spinning-circle;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  width: 100px;
  height: 100px;
}

#spinning-circle img {
  width: 100%;
  height: auto;
}

@-webkit-keyframes spinning-circle {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

#spinning-circle-title {
  padding-top: 35px;
  color: #000;
  font-size: 2.8em;
}

@media screen and (max-width:640px) {
  #spinning-circle-container {
    width: 80%;
    padding: 40px 0 0 6%;
  }
  #spinning-circle {
    animation-name: spinning-circle;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    width: 50px;
    height: 50px;
  }
  #spinning-circle img {
    width: 100%;
    height: auto;
  }
  @-webkit-keyframes spinning-circle {
    0% {
      -webkit-transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      -webkit-transform: rotate(360deg);
    }
  }
  #spinning-circle-title {
    padding-top: 35px;
    color: blue;
    font-size: 1.5em;
  }
}

<div id="spinning-circle-container">
  <div id="spinning-circle">
    <img src="http://optimumwebdesigns.com/images/spinning-circle.png">
  </div>
  <div id="spinning-circle-title">LOADING...</div>
</div>

Answer 1

1. 您需要在带前缀-webkit-transform中使用带前缀的@webkit-keyframes，而不带前缀transform的前缀@keyframes。此外，您还需要添加前缀-webkit-animation。
2. 如果您希望动画最终不会停止，则可以使用animation-timing-function: linear，但动画会保持恒定速度。
3. 您不需要在@keyframes内复制@media screen {}和其他属性。
＆＃13;
＆＃13;
#spinning-circle-container {
    float: left;
    width: 40%;
    background: red;
    padding: 140px 0 0 10%;
}

#spinning-circle {
    -webkit-animation: spinning-circle linear 2s infinite;
    animation: spinning-circle linear 2s infinite;
    width: 100px;
    height: 100px;
}

#spinning-circle img {
    width: 100%;
    height: auto;
}

#spinning-circle-title {
    padding-top: 35px;
    color: #000;
    font-size: 2.8em;
}

@media screen and (max-width: 640px) {
    #spinning-circle-container {
        width: 80%;
        padding: 40px 0 0 6%;
    }

    #spinning-circle {
        width: 50px;
        height: 50px;
    }

    #spinning-circle-title {
        color: blue;
        font-size: 1.5em;
    }
}

@-webkit-keyframes spinning-circle {
    0% {
        -webkit-transform: rotate(0deg);
    }
    
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spinning-circle {
    0% {
        transform: rotate(0deg);
    }
    
    100% {
        transform: rotate(360deg);
    }
}
＆＃13;
<div id="spinning-circle-container">
    <div id="spinning-circle">
        <img src="http://optimumwebdesigns.com/images/spinning-circle.png">
    </div>
    <div id="spinning-circle-title">LOADING...</div>
</div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

您必须在动画定义中添加animation-timing-function: linear;。 这里有代码https://jsfiddle.net/xhurpqLd/

- 编辑 -

你也有

@-webkit-keyframes spinning-circle {
    0% {
        -webkit-transform: rotate(0deg) ;
        -webkit-transform: rotate(0deg) ;
    }
    100% {
        -webkit-transform: rotate(360deg) ;
        -webkit-transform: rotate(360deg) ;
    }
}

您只定义了webkit的转换。改为

@-webkit-keyframes spinning-circle {
    0% {
        -webkit-transform: rotate(0deg) ;
        transform: rotate(0deg) ;
    }
    100% {
        -webkit-transform: rotate(360deg) ;
        transform: rotate(360deg) ;
    }
}

您可以在此处获得更新后的代码https://jsfiddle.net/xhurpqLd/3/。它适用于我的Android。

您还可以为IE支持添加-ms-transform。

Answer 3

main-style.css的第731-733行和第1391-1393行似乎导致摆动问题。

*::after, *::before {
    content: '';
}

应该是

*::after, *::before {
    content: '';
    display: table;
}

假设您尝试使用this clearfix方法