html - 轻松使用 css 动画

Question

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



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

<div class="about5">About</div>

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

桌面上的页面 here .

Answer 1

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

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

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