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规则常用属性大概就这么些!

本博客所有文章如无特别注明均为原创。作者:十月梦想复制或转载请以超链接形式注明转自 十月梦想博客
原文地址《CSS3动画animation
分享到:更多

相关推荐

未登录,暂时无法评论和查看评论!

点击这里给我发消息点击此处联系博主!