CSS 动画在执行期间重置

Question

我正在使用 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);}
}

Answer 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>