时间戳

首页 > 解决方案 > CSS动画在执行期间重置

css - CSS动画在执行期间重置

问题描述

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

标签： csscss-animations

解决方案

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

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

推荐阅读