CSS3 animation动画，风车旋转、loading、人物走路动画案例

最新推荐文章于 2024-09-04 17:17:13 发布

a_Joker_Ling

最新推荐文章于 2024-09-04 17:17:13 发布

阅读量1.4k

点赞数 1

分类专栏： Html CSS 随笔文章标签： animation css html css3 unity3d

本文链接：https://blog.csdn.net/a1209849629/article/details/105473784

版权

本文介绍了CSS3的animation属性，包括@keyframes定义动画关键帧，animation-name、duration、timing-function等参数的用法，并通过风车旋转、loading加载效果、人物走路三个实例展示了CSS3动画的实现过程。

摘要由CSDN通过智能技术生成

CSS3 animation动画
1、@keyframes 定义关键帧动画
2、animation-name 动画名称
3、animation-duration 动画时间
4、animation-timing-function 动画曲线 linear(匀速) | ease(缓冲) | steps(步数)
5、animation-delay 动画延迟
6、animation-iteration-count 动画播放次数 n(自定义次数) | infinite(无限次)
7、animation-direction 动画结束后是否反向还原 normal(不还原)|alternate(反向还原)
8、animation-play-state 动画状态 paused(停止)|running(运动)
9、animation-fill-mode 动画前后的状态 none(缺省)|forwards(结束时停留在最后一帧)|backwards(开始时停留在定义的开始帧)|both(前后都应用)
10、animation:name duration timing-function delay iteration-count direction;同时设置多个属性

案例1：风车旋转：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>风车旋转</title>
	<style type="text/css">
		
		@keyframes rotating{
    
			from{
    
				transform:rotate(0deg);		/*0度*/
			}
			to{
    
				transform:rotate(360deg);
			}
		}

		.zhuan{
    
			display:block;
			width:400px;
			height:400px;
			margin:50px auto 0;
			animation:rotating 2s linear infinite;
		}
		
	</style>
</head>