013动画animation

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>动画</title>
	<style>
		
		div{
			width: 100px;
			height: 100px;
			background-color: pink;
			position: absolute;
			left: 0px;
			/*1、调用动画*/
			/*animation: 动画名称  花费时间  运动曲线  何时开始  播放次数   是否反方向 */
			animation: move 3s ease 0s infinite alternate;
		}

		/*2、声明动画   frames关键帧   @Keyframes 动画名称{  }*/
		@Keyframes move{

			/*来自*/
			from {
				left:0px;
				background-color: pink;
			}

			/*去哪里*/
			to{
				left: 1000px;
				background-color: yellow;
			}
		}


		/*3、或者这样子 第二种定义动画方法*/
		@Keyframes move{
			0%{
				left: 0px;
				background-color: pink;
				transform: scale(1);
			}
			20%{
				left: 200px;
				background-color: red;
				transform: scale(2);
			}
			40%{
				left: 400px;
				background-color: yellow;
				transform: scale(3);
			}
			60%{
				left: 600px;
				background-color: purple;
				transform: scale(2);
			}
			70%{
				left: 800px;
				background-color: blue;
				transform: scale(1);
			}
			100%{
				left: 1000px;
				background-color: black;
				transform: scale(3);
			}
		}
		
		@-webkit-Keyframes move{    /*-webkit-让浏览器支持动画*/
			0%{
				left: 0px;
				background-color: pink;
				transform: scale(1);
			}
			20%{
				left: 200px;
				background-color: red;
				transform: scale(2);
			}
			40%{
				left: 400px;
				background-color: yellow;
				transform: scale(3);
			}
			60%{
				left: 600px;
				background-color: purple;
				transform: scale(2);
			}
			70%{
				left: 800px;
				background-color: blue;
				transform: scale(1);
			}
			100%{
				left: 1000px;
				background-color: black;
				transform: scale(3);
			}
		}

		/*animation: 动画名称  花费时间  运动曲线  何时开始  播放次数   是否反方向

		1、运动曲线：匀速（linear）  加速再减速（ease）  低速开始（ease-in）   低速结束（ease-out）   以低速开始和结束（ease-in-out） 自定义（ cubic-bezier(n,n,n,n) ）
		2、播放次数：无数次（infinite）
		3、是否反方向：正常播放（normal）  反向（alternate）
		 */


	</style>
</head>
<body>
	<div></div>
</body>
</html>
猜你喜欢
