旋转变换在媒体查询中不起作用

Question

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

我的代码中有 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-keyframes中使用前缀-webkit-transform，在非前缀@keyframes中使用非前缀transform。而且你还需要添加前缀-webkit-animation。
2. 如果你想让动画在最后不停止，你可以使用animation-timing-function: linear，但是动画会有一个恒定的速度。
3. 您无需在@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/。它适用于我的 Android。

您也可以添加-ms-transform 以获得 IE 支持。

Answer 3

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

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

应该是

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

假设您尝试使用this clearfix 方法