animation的属性值

animation的属性值

@keyframes 规定动画

animation 属性是一个简写属性，用于设置六个动画属性（复合式写法，出了animation-play-state属性）：
1、animation-name 指定要绑定到选择器的关键帧的名称
2、animation-duration 动画指定需要多少秒或毫秒完成
3、animation-timing-function 设置动画将如何完成一个周期
4、animation-delay 设置动画在启动前的延迟间隔。
5、animation-iteration-count 定义动画的播放次数。
6、animation-direction 指定是否应该轮流反向播放动画。
7、animation-play-state 规定动画是否正在运行或暂停。默认为"running"

@keyframes

使用@keyframes规则 ，你可以创建动画。创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。
其中有默认的
@keyframes name{ from{初始状态属性} to{结束状态属性} }
规定from{}起始位置状态 和to{}最后位置状态。
同时也可以设置为
@keyframes name{ 0%{初始状态属性} 50%{中间再可以添加关键帧} 100%{结束状态属性} }
在其中进行特定动画不同时段的状态修改。

目前浏览器都不支持@keyframes规则。
firefox 支持@-moz-keyframes opera 支持 @-o-keyframes Sarari 和 Chrome 支持 @-webkit-keyframes

animation

animation和transition 都可以进行动画。但transition需要再特定的事件(hover和click等)中才能实现。animation的实现需要有animation-name animation-duration 这两个属性值才能运行。

			.box{
   width: 50px;height: 50px;margin: 50px auto;