CSS3动画

css3动画@keyframes

一、了解动画

CSS3中我们可以用@keyframes规则创建动画，它可以取代许多网页动画图像，Flash动画，和JavaScript。
@keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。

二、定义动画

用百分比来规定变化发生的时间，0% 是动画的开始，100% 是动画的完成。【或用关键词 “from” 和 “to”，等同于 0% 和 100%。】
注：推荐定义 0% 和 100% 选择器。

三、动画属性

1. @keyframes

规定动画。

<style>
	/*
	@keyframes  animationname【动画名称】  {
		keyframes-selector【动画选择器，动画持续时间的百分比】 {css-styles【一个或多个css样式属性】}
	}
	*/
	/*例如：*/
@keyframes mymove {
	0%   {top:0px; background:red; width:100px;}
	100% {top:200px; background:yellow; width:300px;}
}
 /* Safari and Chrome */
@-webkit-keyframes mymove {
	0%   {top:0px; background:red; width:100px;}
	100% {top:200px; background:yellow; width:300px;}
}
</style>

2. animation

绑定一个动画到一个元素身上
例如：

div {
    position: relative;
    animation:mymove 5s infinite;
    -webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}
@kryframes mymove {
	0% {top: 0;left:0;}
	100% {top: 20px;left:0;}
}

语法：
动画：名称 周期时间 方式{例：匀速} 延迟时间 迭代次数 非运行状态下样式 是否暂停动画

animation: name duration timing-function delay iteration-count direction fill-mode play-state;