为什么 'transform:rotate(Xdeg)' 导致动画停止？

Question

我尝试在 window 达到 min/max 大小时旋转动画字体箭头，但是当旋转发生时动画停止，同样只是为了测试我尝试替换 transform: rotate(90deg) 到 transform: rotate(0deg) 保持相同的箭头方向，但它也会导致动画停止。问题出在 transform: rotate() 上，可以通过在浏览器开发人员工具中检查元素和 activating/deactivating 来轻松测试它。

绕过这个的一个简单方法是使用两个 <p>，每个都带有不同方向的箭头，每个都有垂直和水平动画，并使用 display: none; 在它们之间交替 min/max 大小开关，但我想知道为什么会发生这种情况以及如何使用这种方法解决这个问题

.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(..) 会覆盖属性的值，而不是合并它们。 IE。生成的样式是 transform: rotate(..)，而不是 transform: translateX(..) rotate(..).

如果您正在为 box-shadow 设置动画，然后还想要一个插图 box-shadow，这将是相同的，它会用另一个覆盖一个。或者更简单 - 如果你有 .box { color: red; color: blue; } css 将选择最后一个 value（蓝色）应用到 color 属性。

如果有css属性rotate: 90deg和translate: 4px（只有not widely supported），那么你的动画会工作，因为平移动画将应用于与旋转不同的属性，而不是覆盖在许多变换函数中本质上共享的动画。

解决方法

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

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

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

如果您的框架/资产提供了一个已经旋转的箭头，您可以use/make。

为什么 'transform:rotate(Xdeg)' 导致动画停止？

Why does 'transform:rotate(Xdeg)' cause the animation to stop?

html

css

animation

rotation

为什么会这样

解决方法