CSS动画精讲-优快云博客

本文深入讲解CSS动画的定义与使用，包括@keyframes规则、动画属性详解如animation-delay、animation-name、animation-duration等，以及动画执行速度、结束样式、循环次数、方向控制和播放状态的设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS常用属性

动画

定义动画：

（一）普通定义动画

 @keyframes 动画名字 {
           from{
               初始样式
           }
           to{
               改变后样式
           }
       }

（二）百分比定义动画

 @keyframes 动画名字 {
           百分比{改变后样式}
       }
       
   eg：@keyframes aa {
           0%{background-color: rgb(252, 47, 32)}
           25%{background-color: rgb(236, 138, 25)}
           50%{background-color: rgb(131, 245, 55)}
           75%{background-color: rgb(73, 236, 222)}
           100%{background-color: #b633f3}
       }

使用动画：

animation：动画名字 执行时间 执行次数（infinite）等

动画属性：

    1） animation-delay：3s;   开始时间
        animation-name：ly;  动画名字
        animation-duration：3s;  动画执行时间
       
    2） animation-timing-function：linear； 动画执行速度
            linear：匀速
            ease ： 默认值，慢 到快 再到慢

    3） animation-fill-mode：forwards；动画结束后的样式
            none 默认值  动画前什么样，结束后就什么样    
            forwards 动画结束时，是什么样式，就是什么样式 

    4） animation-iteration-count：infinite； 规定动画执行次数
             值为： 数字 或者 infinite无限循环
    5） animation-direction：alternate;
            normol 正向旋转
            reverse 反向旋转
            alternate 奇数正向 偶数反向
            alternate-reverse 奇数反向 偶数正向
    5） animation-play-state：paused;     
             running  播放 默认值
             paused   暂停