轻松使用 css 动画答案

【问题标题】：Using ease with css animation轻松使用 css 动画
【发布时间】：2020-03-01 21:26:55
【问题描述】：

.about5 {
    animation: 
    fade 4s ease forwards; animation-delay: 5s;} 



     @keyframes fade {
     0% { opacity: 0; }
     50% { opacity: 1; }
    100% { opacity: 0;}}

&lt;div class="about5"&gt;About&lt;/div&gt;

动画正确延迟 5s，但在淡出之前闪烁一次。为什么？这是因为我使用的是ease，我应该使用linear吗？

桌面上的页面here。

【问题讨论】：

你需要在元素内部设置 opacity:0
怎么样？........
.about5 最初没有将其不透明度设置为0，所以它在开始时基本上是1 - 然后，一旦动画开始，它就设置为0，然后淡入。添加.about5 { opacity: 0; ... } 将解决您的问题。

标签： html css

【解决方案1】：

如果您只想让您的内容淡出，您可以将不透明度设置为 1 处的 0% 关键帧，如下所示：

...
@keyframes fade {
 0% { opacity: 1; }
 50% { opacity: 1; }
100% { opacity: 0;}}

有关轻松和线性的更多信息，this post 可以比我更好地解释它:)

【讨论】：