CSS3 动画

动画

动画的基本使用

制作动画分为两步：

1.先定义动画

2.再使用（调用动画）

1.用keyframes定义动画

@keyframes 动画名称{
	0%{
		 100px;
	}
	100%{
		 200px;
	}
}

动画序列

●0%是动画的开始, 100%是动画的完成。这样的规则就是动画序列。

●在@keyframes中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果。

●动画是使元索从- -一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。

●请用百分比来规定变化发生的时间,或用关键词"from"和"to" ,等同于0%和100%。

动画常用属性

动画简写属性

animation :动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;

animation:myfirst 5s linear 2s infinite alternate;

速度曲线细节：

animation-timing-function：linear（匀速）/ease（低速开始，然后加快，在结束前变慢）/ease-in（动画以低速开始）/ease-out（以低速结束）/ease-in-out（以低速开始 和结束）/steps()（分几步完成动画）