CSS3起步 10-------css3动画基础之animation

本文链接：https://blog.csdn.net/h1234561234561/article/details/89301727

相应API及常识
01,animation-name：关键帧名
02,animation-delay：动画开始之前的延迟
03,animation-iteration-count：动画重复次数
04,animation-direcction：动画方向反转的也只是关键帧中动画的方向和动画animation-titming-function形式
05，animation-during：动画一个周期时间一个动画周期的time，from~to
06，animation-fill-model：动画开始前和动画结束后的状态控制动画外的状态
07，什么是动画外的状态：from之前，to之后

关键帧

@keyframes topTobottom{
			0% {
				css-style;
			}
			50% {
				css-style;
			}
			100% {
				css-style;
			}		
	 }

注意点
01，animation-delay：是动画外的属性
02，animation-iteration-count：它重复的只是动画内的属性【关键帧中的动画】，动画外的不重复如：animation-delay
03，animation-direcction：反转的也只是关键帧中动画的方向和动画animation-titming-function形式顺序
04，animation-during：它只是一个动画的周期时间，from到to
05，animation-titming-function：定义的是一个关键帧周期运动形式【0%到50%;50%到100%;两个关键针周期】，而非整个动画周期。
06，百分比代表的是animation-during时间

demo1运动的小球

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>animation动画</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			html,body {
				height: 100%;
				overflow: hidden;
			}
			#wrap {
				position: absolute;
				width: 300px;
				height: 300px;
                top: 50%;
				left: 50%;
				margin-top: -150px;
				margin-left: -150px;
				border: 1px solid black;
			}
			#box {
				position: absolute;
				width: 100px;
				height: 100px;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				text-align: center;
				font: 30px/100px "宋体";
				color: red;
				background-color: pink;
				border-radius: 50%;
				animation-name: topTobottom;
				animation-delay: 1s;
				animation-duration: 3s;
				animation-direction: alternate;
				animation-iteration-count: infinite;
				animation-timing-function: ease-in;
				animation-fill-mode: both;
			}
			@keyframes topTobottom{
				0% {
					transform: translate(-50%, -150px);
				}
				50% {
					transform: translate(-50%, -50%);
				}
				100% {
					transform: translate(-50%, 50px);
				}
				
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div id="box">
				燃情雪
			</div>
		</div>
	</body>
</html>

demo2开机动画2D

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>开机动画2D</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			html,
			body {
				height: 100%;
				overflow: hidden;
			}

			#wrap {
				position: absolute;
				width: 100%;
				height: 100%;
				text-align: center;
				background-color: gray;
			}

			#box {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				white-space: nowrap;
				display: inline-block;
			}
			#box > span {
				display: inline-block;
				animation: topTobottom 1s linear;
				animation-direction: alternate;
				animation-iteration-count: infinite;
				animation-fill-mode: both;
			}

			@keyframes topTobottom {
				from {
					transform: translate(0, 0);
				}

				to {
					transform: translate(0, -20px);
				}

			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div id="box">
				<span>都</span>
				<span>二</span>
				<span>十</span>
				<span>多</span>
				<span>岁</span>
				<span>的</span>
				<span>人</span>
				<span>了</span>
				<span>还</span>
				<span>装</span>
				<span>可</span>
				<span>爱</span>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var spanList = document.querySelectorAll("#box > span");
		var colorList = ["red", "orange", "yellow", "green", "blue", "pink", "deeppink", "black", "red", "orange", "yellow", "green", "blue", "pink", "deeppink", "black"];
	    for(var i = 0; i < spanList.length; i++) {
			//不是批处理,就不需要创建节点style
			spanList[i].style.animationDelay = i*150+"ms";
			spanList[i].style.color = colorList[i];
		}
	</script>
</html>