CSS动画在执行期间重置

我正在使用webkit关键帧设置一些矩形的动画。从我所看到的一切来看，动画应该运行正常。我正在使用

转发

修改器来保留动画更改，并且我的所有语法都是正确的（请参见下面我的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);}
}

---

动画的所有阶段都是

transform

settings–如果触发了一个新的阶段，它将替换上一个阶段（将以前的参数设置回默认值）。为了避免这种情况，请将以前的值/参数保留在新的变换设置中，然后添加新的参数/设置，如下所示：

.test{
宽度：100px；
高度：60px；
背景：#fa0；
-webkit动画：关闭前5名；
}
@-webkit关键帧关闭顶部{
0% {
转换：转换（0px，5px）；
}
33% {
转换：转换（0px，15px）；
}
66% {
转换：转换（0px，15px）scaleX（0.5）；
}
100% {
变换：平移（0px，15px）scaleX（0.5）旋转（-45度）；
}
}

---

TEST

动画的所有阶段都是

transform

设置–如果触发了一个新的阶段，它将替换上一个阶段（先前的参数将动画设置回其默认值）。为了避免这种情况，请将以前的值/参数保留在新的变换设置中，然后添加新的参数/设置，如下所示：

.test{
宽度：100px；
高度：60px；
背景：#fa0；
-webkit动画：关闭前5名；
}
@-webkit关键帧关闭顶部{
0% {
转换：转换（0px，5px）；
}
33% {
转换：转换（0px，15px）；
}
66% {
转换：转换（0px，15px）scaleX（0.5）；
}
100% {
变换：平移（0px，15px）scaleX（0.5）旋转（-45度）；
}
}

---

测试

这是因为

转换

属性是如何工作的。每次在关键帧中设置

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

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

---

各个变换从右向左求值

这是因为

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

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

---

各个变换从右向左求值

每个步骤都会覆盖上一个步骤属性转换，您可以做的是将上一个更改附加到此属性，如下所示：

.navbar切换程序：未（.collapsed）。图标栏：第n个子项（1）{
不透明度：100；
背景色：黑色；
宽度：100px；
高度：100px；
-webkit动画：关闭前5名；
}
@-webkit关键帧关闭顶部{
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（-45度）；}
}

---

每一步都会覆盖上一步的属性转换，您可以做的是将之前的更改附加到此属性，如下所示：

.navbar切换程序：未（.collapsed）。图标栏：第n个子项（1）{
不透明度：100；
背景色：黑色；
宽度：100px；
高度：100px；
-webkit动画：关闭前5名；
}
@-webkit关键帧关闭顶部{
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（-45度）；}
}

您可能需要连接转换：

100%{transform:rotate（-45deg）translate（0px，15px）；}

连接会消除转换之间的区别吗？我需要每个变换都是明显的而不是模糊在一起。您可能需要连接变换：

100%{transform:rotate（-45deg）translate（0px，15px）；}

连接会消除变换之间的区别吗？我需要每个变换都是明显的，而不是模糊在一起