css3动画

css3动画效果分三类

transition(过渡属性)

①transition-propertty:设置对象中的参与过渡的属性

• all：所有可以进行过渡的css属性
• none：不指定过渡的css属性
• property：指定要进行过渡的css属性（width、height、color。。。）

②transition-duration：设置对象过渡的持续时间，主要以S为单位

③transition-timing-function：设置对象中过渡的类型

• linear：线性过渡，匀速。
• ease：平滑过渡，由快到慢，逐渐变慢
• ease-in：由慢到快。
• ease–out：由快到慢。
• ease-in-out：由慢到快再到慢。

④transition-delay：设置对象延迟过渡的时间（可不设置）
一般是transition: all 持续时间 ease 延迟时间（可不设置）;

transform（转换，主要2D和3D转换）

属性：
1. rotate: 设置元素顺时针旋转的角度（transform: rotate(0)、rotate(45deg);）
2. scale: 设置元素放大或缩小的倍数
（transform: scale(a); 元素x和y方向均缩放a倍、transform: scale(a, b); 元素x方向缩放a倍，y方向缩放b倍）
3. translate： 设置元素位移
（translate(a, b); 元素x方向位移a，y方向位移b、translateX(a); 元素x方向位移a，y方向不变、translateY(b); 元素y方向位移b，x方向不变）
4. skew: 设置元素倾斜的角度
（skew(a, b); 元素x方向逆时针倾斜角度a，y方向顺时针倾斜角度b、 skewX(a); 元素x方向逆时针倾斜角度a，y方向不变、skewY(b); 元素y方向顺时针倾斜角度b，想方向不变）
以上的参数均必须是以deg结尾的角度数或0，可为负数表示反向。
5. origin： 设置元素的悬挂点
（transform-origin: a b; 元素的悬挂点为(a, b)，元素的悬挂点即为它旋转和倾斜时的中心点。取值中的a、b可以是长度值、以%结尾的百分比或者left、top、right、bottom四个值。）

animation（动画）

/* 动画的名字，播放时间，延时时间，动画效果，播放次数，播放顺序*/

属性详情：
animation-direction:属性定义是否应该轮流反向播放动画。

animation-fill-mode : 属性规定动画在播放之前或之后，其动画效果是否可见。

animation-iteration-count 属性定义动画的播放次数。

animation-play-state 属性规定动画正在运行还是暂停。

animation-timing-function 规定动画的速度曲线。

实例：

@keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
 
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

div
{
    animation-name: myfirst;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
}

兼容性：

  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;