CSS3关键帧动画(animation keyframes)

最新推荐文章于 2025-05-28 16:06:45 发布

原创最新推荐文章于 2025-05-28 16:06:45 发布 · 4k 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css

本文介绍了CSS3中的关键帧动画animation，通过定义关键点和状态来创建精细的动画效果。步骤包括定义关键帧和绑定动画到目标元素。讨论了animation的各个属性，如animation-name, duration, timing-function, delay, iteration-count, direction和fill-mode，并提供了一个心跳动画的实例。" 79570850,7508373,数据库面试知识点精粹,"['SQL', '数据库设计', '数据库优化', 'JDBC', '存储过程']

关键帧动画animation

通过定义一段动画中的关键点、关键状态来创建动画。Keyframes相比transition对动画过程和细节有更强的控制

分为两步：

一、定义关键帧动画

@keyframes 动画名称{
	时间点 {元素状态}
}
时间点可以用from (表示起始点) 和 to（表示终点）表示
也可以用百分比表示 0%~100%。

二、绑定关键帧动画

在需要添加动画的元素的css中添加属性 animation
animation也是一个复合属性

animation-name：定义的动画名称
animation-duration:time：动画播放的时间
animation-timing-function：规定动画的速度曲线。

	同transition中transition-timing-function默认参数一样，也可以使用贝塞尔曲线
	还可以使用步进函数steps()
	第一个参数必须为正整数,第二个参数取值可以是start或end,默认是end
	step-start：等同于 steps(1, start)
	step-end：等同于 steps(1, end)
	steps(n,start)	设置n个时间点，第一时间点变化状态    
	steps(n,end)	设置n个时间点，第一时间点初始状态

animstion-delay:time：规定在动画开始之前的延迟
animation-iteration-count:：规定动画应该播放的次数

	默认值：1
	infinite：  无限循环

animation-direction：规定是否应该轮流反向播放动画

    normal  默认值正常播放
    reverse 反向播放
    alternate  动画先正常运行再反方向运行，并持续交替运行
    alternate-reverse 动画先反运行再正方向运行，并持续交替运行

animation-fill-mode: 设置对象动画时间之外的状态

none：默认值。不设置对象动画之外的状态
forwards：设置对象状态为动画结束时的状态
backwards：设置对象状态为动画开始时的状态
both：设置对象状态为动画结束或开始的状态
可以和步进函数steps结合使用，来设置失帧的状态

在这里插入图片描述

反之backwards 和 start 也可以配合使用，但是不推荐这么用，效果欠佳

animation-play-state:paused | running 规定动画是否在运行或在暂停，默认值是“running”，不建议使用

下面是写的一个效果：心跳
在这里插入图片描述