欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

css3之动画

程序员文章站 2022-03-16 19:10:51
...

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

相关标签: 前端 CSS CSS3