CSS3（六）——变形与动画

标签：

一、变形

1、旋转 rotate()

2、扭曲 skew()

3、缩放 scale()

4、位移 translate()

5、矩阵 matrix()

6、原点 transform-origin

二、动画

1、过渡属性 transition-property

2、过渡所需时间 transition-duration

3、过渡函数 transition-function

4、过渡延迟时间 transition-delay

三、Keyframes介绍

@keyframes 关键帧

@Keyframes 动画名称{ } 与animation搭配使用，Chrome和Safari需要前缀 -webkit,Foxfire需要前缀-moz-

@keyframes changecolor{

0%{
background: red;
}
20%{
background:blue;
}
40%{
background:orange;
}
60%{
background:green;
}
80%{
background:yellow;
}
100%{
background: red;
}
}

animation-name:changecolor;

animation-duration:10s;

animation-timing-function:ease;

animation-delay:1s;

animation-iteration-count:infinite;   /*动画重复次数*/

animation-direction:normal|alternate;  /*alternate的作用是动画播放在第偶数次向前播放，第奇数次向反方向播放*/

animation-play-state:running|paused;  /*动画的播放状态*/

animation-fill-mode:none|forwards\backwords|both  /*动画时间外属性*/

CSS3（六）——变形与动画

标签：

原文地址：http://www.cnblogs.com/bottlelove/p/5304253.html