（有哪些）CSS 主要通过**过渡（transitions）和关键帧（keyframes）**实现动画。

（过渡是什么）过渡指的是元素**从一种状态（样式）转变为另一种状态（样式）**的动画效果。过渡经常配合 :hover 或 JS 事件使用（触发元素变为另一种状态）。

（过渡怎么实现）通过设置元素 transition 样式，从而设置元素的过渡效果。当元素某些样式变化后，这种变化会根据预先定义的 transition 样式中规定的过渡效果进行变换（核心！！！）。

（过渡的语法简单说明）

1
2
3
4
5
6
7
.element{
    transition: property duration timing-function delay;
    /* 过渡属性：none(默认)、all(最常用)、特定属性名(多个属性名以 , 分割) */
    /* 持续时间：<number>s/ms(接收两种单位，默认值为 0)(如果给多个属性指定，则多个时间以 , 分割) */
    /* 过渡速度曲线: ....... */
    /* 过渡开始前的延迟时间：<number>s/ms(接收两种单位，默认值为 0) */
}

（过渡的注意事项）并不是所有属性都可以过渡，必须值为数字，或可以转换为数字的属性才支持过渡。

（关键帧动画是什么）关键帧动画指的是通过设置多个关键帧来实现的一种动画效果。与过渡效果不同，关键帧动画通常不需要什么触发条件。并且关键帧动画在细节的把握上更加细腻。

（关键帧动画怎么实现）要使用关键帧动画，首先需要使用 @keyframes 动画名 {} 定义一个动画，由一系列关键帧组成。然后在某些元素身上使用 animation 样式来应用动画。

（定义关键帧动画语法简单说明）

  • 只设置开始结束关键帧

    1
    2
    3
    4
    5
    6
    7
    8
    @keyframes 动画名 {
        from { // 开始时刻的关键帧
            
        }
        to { // 结束时刻的关键帧
            
        }
    }

  • 设置百分比关键帧（可以设置任意数量的关键帧）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    @keyframes 动画名 {
        0% { // 开始时刻的关键帧
            
        }
        20% {
            
        }
        xx%{ // 可以设置任意时刻的关键帧
            
        }
        80%{
            
        }
        100% { // 结束时刻的关键帧
            
        }
    }

（使用关键帧动画语法简单说明）

1
2
3
4
5
.element{
    animation: animation-name duration timing-function delay iteration-count direction fill-mode
    /* 动画名(见动画定义) 持续时间(同过渡) 动画速度曲线(同过渡) 动画开始前延迟时间(同过渡) 动画播放次数(<number>, infinite 表示无限次) 动画方向(normal 开始到结束, reverse 结束到开始, alternate 交替, alternat-reverse 反方向交替) 动画结束后的状态(forwards 动画结束时状态, backwards 动画开始时状态) */
    animation-play-status: running; // 动画播放状态，running 默认值，播放；paused 暂停
}

REFERENCES

https://github.com/Nasir1423/front-end-notes/blob/main/1-HTML%2BCSS/HTML%2BCSS.md#过渡day11181p882

https://github.com/Nasir1423/front-end-notes/blob/main/1-HTML%2BCSS/HTML%2BCSS.md#动画