动画

约 382 字大约 1 分钟

2024-10-02

实现多个状态间的变化过程, 动画过程可控(重复播放, 最终画面, 是否暂停).

例子:

使用

有两种定义方式, 第一张只能设置2个状态, 第二种可以设置多个.

@keyframes 动画名称 {
    from {}
    to {}
}

@keyframes 动画名称 {
    0% {}
    10% {}
    ......
    100% {}
}

animation-name: 动画名称

animation-duration: 动画耗时(s)

animation-timing-function

属性值:

lincear: 匀速.

steps(数值): 分步动画, 通常配合精灵图实现精灵动画.

animation-delay: 数值(s)

animation-iteration-count

属性值:

数值: 直接重复几次.

infinite: 无限循环.

animation-direction

属性值:

alternate: 反向.

animation-fill-mode

属性值:

forwards: 结束时状态.

backwards: 开始时状态(默认).

animation-play-state

属性值:

paused: 暂停, 通常配合:hover使用.

animation: 动画名称动画耗时速度曲线延时时间重复次数动画方向执行完毕状态

提示:

版权归属：Erhai_lake