为什么“transform:rotate(Xdeg)”会发生变化？导致动画停止？

Question

当窗口达到最小/最大大小时，我尝试旋转动画字体箭头，但是当旋转发生时，动画停止，也仅用于测试，我尝试替换transform：rotate（90DEG） to <<代码>转换：旋转（0DEG）维护同一箭头的方向，但也会导致停止动画。问题是变换：rotate（），可以通过检查元素并激活/停用它在浏览器开发人员工具中来轻松测试。

绕过这一点的一种简单方法可以使用两个＆lt; p＆gt;每个箭都在不同方向，垂直和水平动画，以及使用display> display：none;>当最小/最大尺寸切换时它们之间交替，但是我想要的是知道为什么会发生这种情况以及如何使用此方法解决此问题

.text-center {
  text-align: center;
}

.lnr-x3 {
  font-size: 2.4rem;
}

@media (max-width: 991px) {
  #catalogArrow_h {
    transform: rotate(90deg) !important;
    transform-origin: center !important;
  }
}

.animated-h {
  text-decoration: none;
  outline-style: none;
  -webkit-animation: movingHorizontally 1.7s ease-in-out infinite;
  animation: movingHorizontally 1.7s ease-in-out infinite;
}

@keyframes movingHorizontally {
  0% {
    transform: translateX(0px);
    -webkit-transform: translateX(0px);
  }
  50% {
    transform: translateX(-10px);
    -webkit-transform: translateX(-10px);
  }
  100% {
    transform: translateX(0px);
    -webkit-transform: translateX(0px);
  }
}

@-webkit-keyframes movingHorizontally {
  0% {
    transform: translateX(0px);
    -webkit-transform: translateX(0px);
  }
  50% {
    transform: translateX(-10px);
    -webkit-transform: translateX(-10px);
  }
  100% {
    transform: translateX(0px);
    -webkit-transform: translateX(0px);
  }
}

<!-- Font Icons -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" type="text/css">
<link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">

<div class="col-12">
  <p class="text-center pt-3 px-5">
    <span id="catalogArrow_h" class="lnr lnr-x3 lnr-arrow-right fas animated-h"></span>
  </p>
</div>

Answer 1

为什么会发生这种情况

变换属性对于许多变换函数是“共享的”，并且CSS不组合任何属性的值。

由于您的动画是使用 transform:translateX(..) 制作的，因此添加 transform:rotate(..) 将覆盖属性的值，而不是组合它们。即生成的样式是 transform:rotate(..)，而不是 transform:translateX(..)rotate(..)。

如果您对 box-shadow 进行动画处理，然后还想要一个插入 box-shadow，情况会是一样的，它会用另一个覆盖一个。或者更简单 - 如果你有 .box { color: red;颜色: 蓝色; } css 将选择最后一个值（蓝色）应用于color 属性。

如果有CSS属性rotate: 90deg和translate: 4px（只有未得到广泛支持），那么您的动画就可以工作，因为平移动画将应用于与旋转不同的属性，而不是覆盖许多变换函数本质上共享的一个。

解决方法

解决这个问题的方法有很多。

• 您可以在父元素上设置平移或旋转

<div class="rotate-90">
  <span class="translate-animate"></span>
</div>

• 您可以将旋转添加到平移动画属性中：

@keyframes movingHorizontallyRotated {
  0%, 100% { transform: translateX(0px)   rotate(90deg); }
  50%      { transform: translateX(-10px) rotate(90deg); }
}

• 您可以对不同的属性进行动画处理以平移元素：

@keyframes movingHorizontally {
  0%, 100% { padding: 5px 10px 5px 0px; }
  50%      { padding: 5px 0px 5px 10px; }
}

• 如果您的框架/资产提供了一个已经旋转的箭头，则可以使用/制作一个已经旋转的箭头。