CSS3动画animation - 码农教程

animation和上次说的transform动画有点不同，需要进行定义动画规则，而animation则无需受体，自动执行动画，translation则需要某个动作执行才进行动画！

下面看一个animation参数

animation: run 3s linear 0.5s infinite;

第一个参数是这个运动的规则，第二个指定该运动的执行时间第三个参数指定运动曲线(linear匀速)

第四个是一个完整动作执行完毕后延时（暂停时间），infinite(重复)动画是否重复；

一般只需要指定动画规则和运动时间这个动画就可以正常执行！

上面指定了一个正常的animation,下面当然要设置运动规则

@keyframes run{
				0%{
					width:300px;
				}
				30%{
					width:600px;
				}60%{
					width:900px;
				}
				80%{
					width:600px;
				}
				100%{
					width:300px;
				}
			}

@keyframes是执行规则定制开头,第二个run是在animation时候定义的动画规则名字

上述指定了run的规则从0%到100%,这个过程实质上是整个运动时间的百分比,还有下面一种方式定义规则

@keyframes run{
				form{
				}
				to{
				}
			}

form开始时候状态,to结束时候状态

animation还有一个参数alternate(反转):正向完成一个动画后则反向继续运动.一个动画从0%到100%执行一次,100%到0%过程(则为反转alternate)

如果指定alternate(反转)则第1,3,5,7...奇数次运动则为顺时针(正向),2,4,6,8,10...偶数次运动则为逆时针(反向)

看一下转盘选择demo实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>animetation大转盘</title>
		<style>
			img{
				width:550px;
				height:550px;
				border: 10px solid #a66ffa;
				margin:200px auto;
				border-radius:50%;
				display: block;
				
				animation: run 5s linear infinite;
				 /*alternate 反转(逆时针)*/
				
			}
			img:hover{
				animation-play-state:paused ;
			}
		/*定义运动规则*/
		@keyframes run{
			from{
				transform: rotate(0deg);
			}
			to{
				transform: rotate(360deg);
			}
		}
		</style>
	</head>
	<body>
	<img src="http://i.niupic.com/images/2018/03/11/vivSSI.jpg" alt="" />
	</body>
</html>

这个demo可能会发现一个新的属性animation-play-state:paused;这个这指定了animation的动画暂停!

animation更多属性参考w3c规则常用属性大概就这么些!