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>

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

请注意我如何保持以前的变换出现在值中，并将新的变化添加到列表的开头。

各个变换从右到左求值。

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

<div class="test">TEST</div>

CSS动画在执行期间重置

3 个答案: