时间戳

首页 > 解决方案 > 轻松使用 css 动画

html - 轻松使用 css 动画

问题描述

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

桌面上的页面在这里。

标签： htmlcss

解决方案

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

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

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

推荐阅读