CSS3常用动画属性

一、CSS3 transition 属性：

div
{
width:100px;
height:100px;
transition:width 2s;
-webkit-transition:width 2s; /* Safari and Chrome */
}
div:hover{width:300px;}

transition 属性设置元素当过渡效果，四个简写属性为：

transition: property duration timing-function delay;

语法：

值	描述
transition-property	指定CSS属性的name，transition效果
transition-duration	transition效果需要指定多少秒或毫秒才能完成
transition-timing-function	指定transition效果的转速曲线
transition-delay	定义transition效果开始的时候

二、animation属性动画

eg:

div {
　　animation:upDown 4s infinite;
}
@keyframes upDown{
    0%   {top:-0.8rem;}            
    50%  {top:-1.1rem;}            
    100% {top:-0.8rem;}
}
@-webkit-keyframes upDown /* Safari 和 Chrome */
{
    0%   {top:-0.8rem;}            
    50%  {top:-1.1rem;}
    100% {top:-0.8rem;}
}

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

语法介绍：

值	说明
animation-name	指定要绑定到选择器的关键帧的名称
animation-duration	动画指定需要多少秒或毫秒完成
animation-timing-function	设置动画将如何完成一个周期
animation-delay	设置动画在启动前的延迟间隔。
animation-iteration-count	定义动画的播放次数。如：1  则表示执行一次
animation-direction	指定是否应该轮流反向播放动画。
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state	指定动画是否正在运行或已暂停。
initial	设置属性为其默认值。
inherit	从父元素继承属性。

其中常用属性的具体介绍：

1、animation-direction 的语法：

值	描述
normal	默认值。动画按正常播放。
reverse	动画反向播放。
alternate	动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。 动画应该轮流反向播放。注释：如果把动画设置为只播放一次，则该属性没有效果。
alternate-reverse	动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。
initial	设置该属性为它的默认值。
inherit	从父元素继承该属性。