CSS3转换过渡动画效果总结

内容摘要：

       本篇主要介绍CSS3的一些动画效果设置，从转换、过渡、动画3个方式总结介绍。

目录简介：

1.    转换

2.    过渡

3.    动画

标签：

       CSS3，transform，transition，keyframes，animation

 

1．     转换

转换即transform，是指html元素在原来属性基础上增加转换效果之后形成的新的属性所表现的状态。通常为通过CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。

分为2D和3D两种转换模式效果。

 2D转换：

 2D转换有是通过给元素指定transform属性来实现，有translate()、rotate()、scale()、skew()、matrix()5种取值设置方式。

       translate()方法：

定义：通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数。

实例：值translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素

div
{
     transform:translate(50px,100px);
     -ms-transform:translate(50px,100px);                    
/* IE 9 */
     -webkit-transform:translate(50px,100px);              
/* Safari and Chrome */
     -o-transform:translate(50px,100px);                      
/* Opera */
     -moz-transform:translate(50px,100px);                  
/* Firefox */
}

 

rotate() 方法：

定义：通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

实例：值 rotate(30deg) 把元素顺时针旋转 30 度。

div

{

     transform: rotate(30deg);

     -ms-transform: rotate(30deg);                 /* IE 9 */

     -webkit-transform: rotate(30deg);           /* Safari and Chrome */

     -o-transform: rotate(30deg);                   /* Opera */

     -moz-transform: rotate(30deg);                              /* Firefox */

}

 

scale()方法：

定义：通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数。

实例：值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。

div

{

     transform: scale(2,4);

     -ms-transform: scale(2,4);         /* IE 9 */

     -webkit-transform: scale(2,4);   /* Safari 和 Chrome */

     -o-transform: scale(2,4);           /* Opera */

     -moz-transform: scale(2,4);       /* Firefox */

}

 

skew ()方法：

定义：通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数。

实例：值 skew(30deg,20deg)围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。

div

{

     transform: skew(30deg,20deg);

     -ms-transform: skew(30deg,20deg);         /* IE 9 */

     -webkit-transform: skew(30deg,20deg);   /* Safari and Chrome */

     -o-transform: skew(30deg,20deg);           /* Opera */

     -moz-transform: skew(30deg,20deg);       /* Firefox */

}

 

matrix()方法：

定义：matrix() 方法把所有 2D 转换方法组合在一起。

matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

实例：如何使用 matrix 方法将div 元素旋转 30 度：

div

{

     transform:matrix(0.866,0.5,-0.5,0.866,0,0);

     -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);          /* IE 9 */

     -moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0);        /* Firefox */

     -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);/* Safari and Chrome */

     -o-transform:matrix(0.866,0.5,-0.5,0.866,0,0);                           /* Opera */

}

 

2D转换进阶：

除了可以给元素指定transform外还可以指定，transform-origin设置旋转元素的基点位置：

Transform-origin属性：

定义：transform-origin:x-axis y-axis z-axis;

x-axis	定义视图被置于 X 轴的何处。可能的值： ·         left ·         center ·         right ·         length ·         %
y-axis	定义视图被置于 Y 轴的何处。可能的值： ·         top ·         center ·         bottom ·         length ·         %
z-axis	定义视图被置于 Z 轴的何处。可能的值： ·         length

 

实例：设置旋转元素的基点位置

div{              

     transform: rotate(45deg);

     transform-origin:20% 40%;

}

 

补充：2D转换除了以上5中主类方法外，还可以单独针对X方向或Y方向进行转换操作，进行更精细的操作。方法如下：

函数	描述
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
scaleY(n)	定义 2D 缩放转换，改变元素的高度。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)	定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)	定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)	定义 2D 倾斜转换，沿着 Y 轴。

 

3D转换：

3D转换的设置方法和2D是一致，通过给元素设定transform和transform-origin属性。除此之外还增加了transform-style，perspective，perspective-origin，backface-visibility

属性	描述
transform	向元素应用 2D 或 3D 转换。
transform-origin	允许你改变被转换元素的位置。
transform-style	规定被嵌套元素如何在 3D 空间中显示。
perspective	规定 3D 元素的透视效果。
perspective-origin	规定 3D 元素的底部位置。
backface-visibility	定义元素在不面对屏幕时是否可见。

 

属性设置值增加如下的方法：

函数	描述
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)	定义 3D 转化。
translateX(x)	定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)	定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)	定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿 X 轴的 3D 旋转。
rotateY(angle)	定义沿 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿 Z 轴的 3D 旋转。
perspective(n)	定义 3D 转换元素的透视视图。

 

2．     过渡

过渡即transition。通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。一般的效果是将元素的原始状态到最终状态的属性形成一个逐渐改变的过渡效果，视觉上是一个渐变过程，就如同一个动画效果。

要实现这一点，必须规定两项内容：

1.规定您希望把效果添加到哪个 CSS 属性上。CSS属性可以是常用的如height,width,color等，此外还可以添加到transform等转换的属性。并且同时要配合指定什么条件下触发到指定的最终状态的属性值，这样就可以在条件满足的情况下，属性值逐渐改变的动画呈现。下面的实例都是以鼠标悬停在元素上触发。

2.规定效果的时长。如果时长未规定或设置为0，则不会有过渡效果。默认值是 0。

 

实例1：当鼠标指针悬浮于 <div> 元素上时的宽度从原来的值逐渐变成300px。

div:hover

{

     width:300px;

}

 

实例2：当鼠标悬停是，同时改变多个属性width、height和transform

div

{

     transition: width 2s, height 2s, transform 2s;

     -moz-transition: width 2s, height 2s, -moz-transform 2s;

     -webkit-transition: width 2s, height 2s, -webkit-transform 2s;

     -o-transition: width 2s, height 2s,-o-transform 2s;

}

div:hover

{

     width:300px;

     height:600px;

     transform:scaleX(360deg);

}

 注：实例2需要如上介绍所说的要指定在什么条件下的最终状态。这里设置在鼠标悬停时要显示的最终效果属性。

 

过渡属性：

属性	描述
transition	简写属性，用于在一个属性中设置四个过渡属性。
transition-property	规定应用过渡的 CSS 属性的名称。
transition-duration	定义过渡效果花费的时间。默认是 0。
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。
transition-delay	规定过渡效果何时开始。默认是 0。

 

       过渡属性的两个实例写法

       写法1：

div

{

     transition-property: width;

     transition-duration: 1s;

     transition-timing-function: linear;

     transition-delay: 2s;

}

 

       写法2：简写transition属性

div

{

     transition: width 1s linear 2s;/* Firefox 4 */

}

 

      

3．     动画

动画即ainimation。是真正意义上的类计算机视频动画，由起始过程中的帧来定义。@keyframes规则用于创建动画，@keyframes就是定义过程中的特定时间点的帧。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

       注: InternetExplorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。Chrome 和 Safari 需要前缀-webkit-。Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。

       @keyframes写法：

       写法1：指定起止点的css属性值，通过from和to来指定第一帧和最后一帧。

@keyframes myfirst

{

from {background: red;}

to {background: yellow;}

}

@-moz-keyframes myfirst /* Firefox */

{

from {background: red;}

to {background: yellow;}

}

@-webkit-keyframes myfirst /* Safari 和 Chrome */

{

from {background: red;}

to {background: yellow;}

}

@-o-keyframes myfirst /* Opera */

{

from {background: red;}

to {background: yellow;}

}

 

       写法2：按照百分比指定，过程点的帧

@keyframes myfirst

{

0%   {background: red;}

25%  {background: yellow;}

50%  {background: blue;}

100% {background: green;}

}

@-moz-keyframes myfirst /* Firefox */

{

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;}

}

@-o-keyframes myfirst /* Opera */

{

0%   {background: red;}

25%  {background: yellow;}

50%  {background: blue;}

100% {background: green;}

}

       0%=from;100%=to，但不能混用。0% 是动画的开始，100% 是动画的完成。@keyframes的定义可以同时指定多个属性的值,包括transform。

       指定动画：

       通过规定至少以下两项 CSS3 动画属性值设置到animation属性上，即可将动画绑定到选择器对象上：

1.规定动画的名称

2.规定动画的时长

       实例：把如上@keyframes指定到div上

div

{

animation: myfirst 5s;

-moz-animation: myfirst 5s;           /* Firefox */

-webkit-animation: myfirst 5s;       /* Safari 和 Chrome */

-o-animation: myfirst 5s;               /* Opera */

}

 

       动画属性值：

      

属性	描述
@keyframes	规定动画。
animation	所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function	规定动画的速度曲线。默认是 "ease"。
animation-delay	规定动画何时开始。默认是 0。
animation-iteration-count	规定动画被播放的次数。默认是 1。
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。
animation-fill-mode	规定对象动画时间之外的状态。

 

       动画属性的写法：

       写法1：每个属性单独指定

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;

     /* Firefox: */

     -moz-animation-name: myfirst;

     -moz-animation-duration: 5s;

     -moz-animation-timing-function: linear;

     -moz-animation-delay: 2s;

     -moz-animation-iteration-count: infinite;

     -moz-animation-direction: alternate;

     -moz-animation-play-state: running;

     /* Safari 和 Chrome: */

     -webkit-animation-name: myfirst;

     -webkit-animation-duration: 5s;

     -webkit-animation-timing-function: linear;

     -webkit-animation-delay: 2s;

     -webkit-animation-iteration-count: infinite;

     -webkit-animation-direction: alternate;

     -webkit-animation-play-state: running;

     /* Opera: */

     -o-animation-name: myfirst;

     -o-animation-duration: 5s;

     -o-animation-timing-function: linear;

     -o-animation-delay: 2s;

     -o-animation-iteration-count: infinite;

     -o-animation-direction: alternate;

     -o-animation-play-state: running;

}

 

       写法2：简写方式

div

{

     animation: myfirst 5s linear 2s infinite alternate;/* Firefox: */

     -moz-animation: myfirst 5s linear 2s infinite alternate;/* Safari 和 Chrome: */

     -webkit-animation: myfirst 5s linear 2s infinite alternate;/* Opera: */

     -o-animation: myfirst 5s linear 2s infinite alternate;

}

 

 

补充内容：

 

参考资料：