Question

我有一个非常简单的动画，淡出并收缩div。

但问题是，当动画结束时，它会回到起点并停留在那里。

＆＃13;

div {
  background-color: red;
  height: 80px;
}

.fade-out {
    animation-name: fade-out;
    animation-duration: 2s;
}

@keyframes fade-out {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 0; height: 0;}
}

＆＃13;

 
  <div class="fade-out">Style Test</div>

＆＃13;

Answer 1

如果您将animation-fill-mode: forwards;添加到.fade-out规则，它将修复您的动画。

animation-fill-mode指定在执行动画之前和之后应如何应用CSS规则。默认值为none，这意味着在执行动画之前和之后，它不会应用任何动画样式。这就是为什么你会看到它恢复到动画前的状态。

forwards告诉浏览器保留最后一个关键帧的样式。这就是你要找的东西。

有关详细信息，请参阅the MDN docs。

＆＃13;

div {
  background-color: red;
  height: 80px;
}

.fade-out {
    animation-name: fade-out;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes fade-out {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 0; height: 0;}
}

＆＃13;

<div class="fade-out">Style Test</div>

＆＃13;

Answer 2

使用animation-fill-mode属性

.fade-out {
    animation-name: fade-out;
    animation-duration: 2s;
    animation-fill-mode: forwards
}

CSS动画无法正常工作

2 个答案: