css3动画属性详解之transform、transition、animation

css3动画属性详解：

关于CSS3制作动画的几个属性：变形(transform)、转换(transition)和动画(animation)。

一、transform

属性：

旋转

rotate

（中心为原点）

扭曲、倾斜

skew

（skew(x,y), skewX(x), skewY(y)）

缩放

scale

（scale(x,y), scaleX(x), scaleY(y)）

移动

translate

（translateX,translateY）

矩阵变形

matrix

。

各个属性的用法：

transform:rotate()

：旋转；其中“10deg”表示“10度”。

transform: rotate(10deg);

transform:skew()

：倾斜；

transform: skew(20deg);

transform:scale()

：比例；“1.5”表示以1.5的比例放大，如果要放大2倍，须写成“2.0”，缩小则为负“-”。

transform: scale(1.5);

transform:translate()

：变动，位移；如下表示向右位移120像素，如果向上位移，把后面的“0”改个值就行，向左向下位移则为负“-”。

transform: translate(120px,0);

综合在一起：(效果是动态)

.demo{-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out}
.demo:hover{-webkit-transform:rotate(360deg) skew(-20deg) scale(3.0) translate(100px,0);-moz-transform:rotate(360deg) skew(-20deg)scale(3.0) translate(100px,0)}

二、transition

css的transition允许css的

属性值

在

一定的时间区间

内

平滑地

过渡。

四个属性：

transition-property是用来指定当元素其中一个属性改变时执行transition效果，其主要有以下几个值：none(没有属性改变)；all（所有属性改变）这个也是其默认值；indent（元素属性名）。当其值为none时，transition马上停止执行，当指定为all时，则元素产生任何属性值变化时都将执行transition效果，ident是可以指定元素的某一个属性值。

transition-duration是用来指定元素,转换过程的持续时间

transition-timing-function: 

transition-delay[延迟] ：是用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition效果

综上所述，相对应的一个示例代码：

a {
transition: background 0.5s ease-in,color 0.3s ease-out;
transition：transform .4s ease-in-out;
}

缩略图实例（原文：Anselm Urban）：http://codepen.io/SitePoint/p...

点击预览

三、animation（@keyframes规则）

CSS3中添加的新属性

animation

是用来为元素实现动画效果的，但是

animation

无法单独担当起实现动画的效果。承载动画的另一个属性——

@keyframes

。使用的时候为了兼容可加上

-webkit-、-o-、-ms-、-moz-、-khtml-

等前缀以适应不同的浏览器。

创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。

通过 @keyframes 规则，您能够创建动画。

@keyframes定义一个动画，并定义具体的动画效果，比如是放大还是位移等等。

@keyframes 它定义的动画并不直接执行，需要借助animation来运转。

在动画过程中，您能够多次改变这套 CSS 样式。

以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。

百分比是指动画完成一遍的时间长度的的百分比 ，0% 是动画的开始时间，50%是动画完成一半的时间，100% 动画的结束时间。百分比后面的花括号写：在动画执行过程中的某时间点要完成的变化。

为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

语法

@keyframes animationname {keyframes-selector {css-styles;}}

值	描述
animationname	必需。定义动画的名称。
keyframes-selector	必需。定义动画的名称。 合法的值： 1. 0-100% 2. from（与 0% 相同） 3. to（与 100% 相同）
css-styles	必需。一个或多个合法的 CSS 样式属性。

例子1：

名字为

gif

的

@keyframes

 ，动画完成需要的总时长为

1.4s

,刚开始的时候图片旋转为0度，动画完成的时候图片旋转360度

.load-border {
width: 120px;
height: 120px;
background: url(../images/loading_icon.png) no-repeat center center;
-webkit-animation: gif 1.4s infinite linear;
animation: gif 1.4s infinite linear;
}
@keyframes gif {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}

例子2：

名字为

mymove

的

@keyframes

 ，动画完成需要的总时长为

1s

,刚开始的时候图片距顶部距离为

0px

，

0.25s

后图片距顶部距离为

200px

，

0.5s

后图片距顶部的距离为

100px

，以此类推

.img {
width: 120px;
height: 120px;
background: url(../images/icon.png) no-repeat center center;
-webkit-animation: gif 1.4s infinite linear;
animation: mymove 1s infinite linear;
}
@keyframes mymove
{
0%   {top:0px;}
25%  {top:200px;}
50%  {top:100px;}
75%  {top:200px;}
100% {top:0px;}
}

例子3：

在一个动画中改变多个 CSS 样式：

@keyframes mymove
{
0%   {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}