关键帧动画从动画上的 div 中移除倾斜答案

【问题标题】：Keyframe animation removing skew from div on animation关键帧动画从动画上的 div 中移除倾斜
【发布时间】：2017-10-22 13:30:24
【问题描述】：

我对 div 应用了倾斜变换，我想在页面加载时对其进行动画处理。

当我使用关键帧动画时，倾斜在动画期间被移除，然后在动画完成后“弹出”到位。

如何在动画进行时保持倾斜应用于 div？

div {
  -webkit-transform:skew(-197deg);
  -moz-transform:skew(-197deg);
  transform:skew(-197deg);
  width: 200px;
  margin-left: 40px;
  animation: 1s ease-in-out 0s 1 slideInFromLeft;
}

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  60% {
    opacity: 0.5;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

&lt;div&gt;Hello, this is a skewed div that does not stay skewed when the animation is in progress.&lt;/div&gt;

【问题讨论】：

标签： css css-animations keyframe

【解决方案1】：

您需要将skew 添加到动画中，否则动画规则将覆盖它。

div {
  -webkit-transform:skew(-197deg);
  -moz-transform:skew(-197deg);
  transform:skew(-197deg);
  width: 200px;
  margin-left: 40px;
  animation: 1s ease-in-out 0s 1 slideInFromLeft;
}

@keyframes slideInFromLeft {
  0% {
    transform: skew(-197deg) translateX(-100%);
    opacity: 0;
  }
  60% {
    opacity: 0.5;
  }
  100% {
    transform: skew(-197deg) translateX(0);
    opacity: 1;
  }
}

&lt;div&gt;Hello, this is a skewed div that does not stay skewed when the animation is in progress.&lt;/div&gt;

【讨论】：

啊，我明白了。因为我在动画中转换了 div，所以它覆盖了另一个转换。感谢您的回答！