如何使用CSS实现元素透明度变化动画_opacity关键帧应用

使用@keyframes定义opacity动画可实现淡入淡出效果，如0%到50%再到100%透明度变化形成呼吸动画，通过animation绑定动画名称、时长、速度曲线和重复次数，结合forwards保持最终状态，适用于提示框或页面过渡。

要实现元素透明度变化的动画，可以使用css的@keyframes规则配合opacity属性。这种方法常用于淡入、淡出或循环闪烁等视觉效果。

定义关键帧动画

使用@keyframes创建一个动画名称，并设置不同阶段的opacity值。

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

上面的例子从完全透明（0）变为不透明（1），再回到透明，形成一个呼吸式动画。

将动画应用到元素

通过animation属性把定义好的关键帧动画绑定到目标元素上。

立即学习“前端免费学习笔记（深入）”；

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

56

查看详情

.fade-element {   width: 100px;   height: 100px;   background-color: blue;   opacity: 0;   animation: fadeInOut 3s ease-in-out infinite; }

• fadeInOut：动画名称，需与@keyframes定义的一致
• 3s：动画持续时间
• ease-in-out：速度曲线，开始和结束较慢
• infinite：无限次重复动画

控制动画起始状态

注意opacity的初始值会影响动画表现。如果希望动画从透明开始，元素本身也应设置opacity: 0，否则可能一开始就可见。

也可以只做单次淡入：

@keyframes fadeIn {   from {     opacity: 0;   }   to {     opacity: 1;   } }  .fade-in-once {   animation: fadeIn 2s forwards; }

forwards表示动画结束后保持最后一帧的状态，不会回退。

基本上就这些，opacity动画简单有效，适合用在提示框、加载图标或页面过渡中。