CSS动画在执行期间重置答案

【问题标题】：CSS Animation resets during executionCSS动画在执行期间重置
【发布时间】：2019-01-16 07:23:04
【问题描述】：

我正在使用 webkit 关键帧来为一些矩形设置动画。从我所看到的一切来看，动画应该可以正常运行。我正在使用forwards 修饰符来保留动画更改，并且我的所有语法都是正确的（请参阅下面的CSS）。但是，每次我执行时，动画似乎都会在每个动画更改发生时放弃它们。

例如，假设我将矩形的宽度修改为 0%，然后将矩形旋转 25%。当它旋转时，宽度将恢复到原来的设置。我真的不确定这里发生了什么。我是否缺少关键帧的基本方面？

.navbar-toggler:not(.collapsed) .icon-bar:nth-child(1) {
    opacity: 100;
    -webkit-animation: close-top 5s forwards;
}
@-webkit-keyframes close-top {
    0% {transform: translate(0px, 5px);}
    33% {transform: translate(0px, 15px);}
    66% {transform: scaleX(0.5);}
    100% {transform: rotate(-45deg);}
}

【问题讨论】：

您可能需要连接转换：100% {transform: rotate(-45deg) translate(0px, 15px);}
连接会消除转换之间的区别吗？我需要每个转换都引人注目而不是模糊在一起

标签： css css-animations

【解决方案1】：

每一步都覆盖上一步的属性转换，你可以做的是在这个属性上附加之前的变化，像这样：

.navbar-toggler:not(.collapsed) .icon-bar:nth-child(1) {
    opacity: 100;
    background-color: black;
    width: 100px;
    height: 100px;
    -webkit-animation: close-top 5s forwards;
}
@-webkit-keyframes close-top {
    0% {transform: translate(0px, 5px);}
    33% {transform: translate(0px, 15px);}
    66% {transform: translate(0px, 15px) scaleX(0.5);}
    100% {transform: translate(0px, 15px) scaleX(0.5) rotate(-45deg);}
}

<div class='navbar-toggler'>
  <div class='icon-bar'>
    <div></div>
  </div>
</div>

【讨论】：

【解决方案2】：

这是因为transform 属性的工作方式。每次在关键帧中设置 transform 时，都会覆盖之前的值。

你想要的是这样的：

@-webkit-keyframes close-top {
    0% {transform: translate(0px, 5px);}
    33% {transform: translate(0px, 15px);}
    66% {transform:  scaleX(0.5) translate(0px, 15px) ;}
    100% {transform: rotate(-45deg) scaleX(0.5) translate(0px, 15px);}
}

请注意我如何将先前的转换保留在值中，并将新的更改添加到列表的前面。

各个变换从右到左求值。

【讨论】：

【解决方案3】：

动画的所有阶段都是transform 设置——如果触发了新阶段，它会替换之前的阶段（之前的参数被动画化回它们的默认值）。为避免这种情况，请将以前的值/参数保留在新的转换设置中，并添加新的参数/设置，如下所示：

.test {
  width: 100px;
  height: 60px;
  background: #fa0;
  -webkit-animation: close-top 5s forwards;
}

@-webkit-keyframes close-top {
  0% {
    transform: translate(0px, 5px);
  }
  33% {
    transform: translate(0px, 15px);
  }
  66% {
    transform: translate(0px, 15px) scaleX(0.5);
  }
  100% {
    transform: translate(0px, 15px) scaleX(0.5) rotate(-45deg);
  }
}

&lt;div class="test"&gt;TEST&lt;/div&gt;

【讨论】：