css3 animation动画

开发工具与关键技术：Adobe Dreamweaver CC 2017 / Visual Studio 2015，HTML、css3
作者：李煜
撰写时间：2019年1月17日

在css3之前要想在页面实现动画效果就必须要靠大量的JavaScript代码，这样就耗费很多时间，而且代码量太大，而css3 animatio属性的出现为我们提供了简便，下面我们来看一个例子：
html:

<div class="open"><div class="dot"></div></div>

css:

.open{
	width: 300px;
	height: 300px;
	border: 2px solid #000000;
	margin: 200px auto;
	}
	.dot{
		width: 20px;
		height: 20px;
		background: #0A00FF;
		border-radius: 50%;
		animation: eeo 6s ease-in-out 1 alternate;
	}
	
	@keyframes eeo{
		0%{
			transform: translateY(0px);
			background: #F70211;
		}
		25%{
			transform: translateX(280px);
			background:#D7FD00;
		}
		50%{
			transform: translate(280px, 280px);
			background: #97BB8B;
		}
		75%{
			transform: translate(0px,280px);
			background: #7F2348;
		}
		100%{
			transform: translateY(0px);
			background: #290708;
		}
	}

css3为animation动画提供了几个属性：
animation-name：动画名称。
动画名称自定义，主要用来调用@keyframes定义好的动画。
animation-duration：动画播放时间。
动画从开始到结束所使用的时间。
animation-timing-funtion：动画播放方式。
这个属性有五种播放方式：
ease（默认值）：动画速度开始比较慢，然后加快速度，达到最大速度后再减慢速度。
linear：动画由开始到结束都是匀速。
ease-in：动画速度由慢到快。
ease-out：动画速度由快到慢。
ease-in-out：动画速度先慢后快再到慢。

animation-delay：动画延迟长一定的时间才开始执行。
动画在指定的时间结束后再执行。
animation-iteration-count：动画的执行次数。
可以指定执行次数，默认值为1，也就是说动画只会执行一次。
可以设置为infinite，无限执行。
animation-direction：动画播放方向。
此属性有两个值normal、alternate
normal（默认）：动画顺时针播放。
alternate：动画逆时针播放。
animation-play-state：控制动画的播放状态。
其主要有两个值：running和paused。
running为继续播放。
paused为暂停播放。
animation-fill-mod：动画开始之前和结束之后发生的操作。
主要具有四个属性值：none、forwards、backwords和both。其四个属性值对应效果如下：
none（默认值）：动画在结束后会反转到开始时的位置。
forwards：动画在结束后会停在结束的位置。
backwards：会在动画开始时迅速到达开始的位置 。
both：动画同时具有forwards和backwards效果。

animation是一个复合属性，动画名称和动画播放时间是必须的，缺一动画都无法运行。

此例子中animatiion属性使用了动画名称，动画播放时间，动画播放方式，动画的执行次数，动画开始之前和结束之后发生的操作。

animation配合@Keyframes使用，@Keyframes后紧接着动画名称，然后在方法体内设置0%-100%，0%-100%之间可以设置多个百分比，只要不超出0%-100%。百分比里面设置想要的动画效果，比如：改变字体颜色，字体大小，背景颜色等。

例子运行效果图：