css3之动画

css3之动画

1、什么是动画

动画(animation)，使元素从一种样式逐渐变化为另外一种样式的过程

2、完成动画所需要的步骤

1、声明动画

在特定的时间点上设置动画的样式
时间点：是个模糊时间，而不是具体时间
样式：元素的样式

2、为元素调用动画

通过 animation 属性 调用动画
并且指定动画的播放时长、次数等

3、声明动画

1、作用：通过@keyframes关键字，声明动画的"关键帧"

关键帧：某个时间点上的特殊效果

2、语法：

@keyframes 动画名 {
 	0% | from {
		/*动画开始时的样式效果*/
		width:100px;
		height:100px;
		background:red;
	}
	...
	50%{
		background:green;
	}
	...
 	100% | to {
		/*动画结束时的样式效果*/
		width:100px;
		height:100px;
		border-radius:50%;
		background:blue;
	}
}				

兼容性：
Chrome&Safari: @-webkit-keyframes 名{}
Firefox: @-moz-keyframes 名{}
Opera: @-o-keyframes名{}

4、调用动画(兼容性)

1、animation-name指定调用动画的名称

2、animation-duration

完成一个动画周期的时间，必须设置的属性，s | ms 作单位

3、animation-timing-function

完成动画时的速度时间曲线函数

4、animation-delay动画播放之前的延迟

5、animation-iteration-count

动画播放次数
取值：

1. 具体数值
2. infinite ：无限次播放

6、aniamtion-direction

动画播放方向
取值：
3. normal,默认值，正向播放(0%~100%)
4. reverse,逆向播放(100%~0%)
5. alternate,奇数播放次数是正向播放，偶数播放次数时，逆向播放

7、简写方式 - animation

animation:name duration timing-function delay iteration-count direction;

8、animation-fill-mode

规定动画在播放之前或之后，动画效果是否可见。
取值：
6. none不改变默认行为
7. forwards ：动画播放完成后，保持在最后一个 帧 的状态上
8. backwards ：动画播放之前(延迟时间内)，保持在第一个帧的状态上
9. both：动画播放前后都采用填充模式

9、animation-play-state

规定动画的播放状态(运行或暂停)
取值：
10. paused : 暂停
11. running : 播放

参考博客
css3动画：实现无限循环进度条： https://blog.csdn.net/weixin_37858072/article/details/90260401