旋转变换在媒体查询中无效

Question

我有一个旋转动画，我象征着有什么东西正在加载。这很好用(除了它不会连续旋转，它在360度旋转时会停下来)，但在一些手机上(我有一部安卓笔记本4)它根本不旋转。然后在其他人(iphones)上，我的圆圈实际上像在摆动一样旋转，或者它固定在圆圈的一角，它从那个轴旋转。

我的代码中有webkit，并将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，在非前缀@keyframes中使用非前缀transform。你还需要添加前缀-webkit-animation.
2. If你想要的动画不会在结尾停止，你可以使用animation-timing-function: linear，但是动画会有一个恒定的速度，你不需要在@media screen {}.

中复制@keyframes和其他属性

​

#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);
    }
}

<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 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/。它能在我的安卓上工作。

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

Answer 3

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

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

应该是

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

假设您尝试使用this clearfix方法