CSS3中的过渡、动画和变换

一、过渡

　　过渡效果一般由浏览器直接改变元素的CSS属性实现。

　　a、transition属性

　　transition 属性是一个简写属性，用于设置四个过渡属性：

transition-property
transition-duration
transition-timing-function
transition-delay

　　注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。　

 1 <!DOCTYPE html>

 2 <html lang="en">

 3 <head>

 4     <meta charset="UTF-8">

 5     <title>Document</title>

 6     <style type="text/css">

 7         div{

 8             width: 100px;

 9             height: 100px;

10             background: blue;

11             transition: width 2s,background 3s,3S linear 3s;

12         }

13         div:hover{

14             width: 300px;

15             background: red;

16             transition: width,background, 3s linear 2s;

17         }

18     </style>

19 </head>

20 <body>

21     <div>

22

23     </div>

24 </body>

25 </html>

　　可以设置设置某个属性的过渡持续时间（transition: width 2s,background 3s,3s linear 3s;），也可以设置所有的属性的过渡的持续时间（transition: width,background, 3s linear 2s）属性值和时间必须用逗号隔开;

　　b、transition-property

　　transition-property 属性规定应用过渡效果的 CSS 属性的名称。（当指定的 CSS 属性改变时，过渡效果将开始）。

　　提示：过渡效果通常在用户将鼠标指针浮动到元素上时发生。

　　　c、transition-duration

　　　transition-duration 属性规定完成过渡效果需要花费的时间（以秒或毫秒计）。

　　d、transition-timing-funtion

　　transition-timing-function 属性规定过渡效果的速度曲线。该属性允许过渡效果随着时间来改变其速度。

　　　e、transition-delay

　　transition-delay 属性规定过渡效果何时开始。transition-delay 值以秒或毫秒计。

 1 <!DOCTYPE html>

 2 <html lang="en">

 3 <head>

 4     <meta charset="UTF-8">

 5     <title>Document</title>

 6     <style type="text/css">

 7         div{

 8             width: 100px;

 9             height: 100px;

10             background: blue;

11         }

12         div:hover{

13             width: 300px;

14             background: red;

15             transition-property: width,background;

16             transition-duration: 3s;

17             transition-timing-function: linear;

18             transition-delay: 0ms;

19         }

20     </style>

21 </head>

22 <body>

23     <div>

24

25     </div>

26 </body>

27 </html>

　　其中过渡属性之间用逗号隔开，可以为延迟时间和持续时间设置多个值，分别对应不同的属性。

　　变化过程

　　上面的过都效果只有鼠标悬停在元素上才会发生，当鼠标离开时，会恢复到元素的开始状态，可以设置反向过渡，使元素的过渡样式平滑的返回初始样式。　　

 1 <!DOCTYPE html>

 2 <html lang="en">

 3 <head>

 4     <meta charset="UTF-8">

 5     <title>Document</title>

 6     <style type="text/css">

 7         div{

 8             width: 100px;

 9             height: 100px;

10             background: blue;

11             transition: width 2s,background 3s, 3s linear 3s;/*反向过渡*/

12         }

13         div:hover{

14             width: 300px;

15             background: red;

16             transition: width,background, 3s linear 2s;

17         }

18     </style>

19 </head>

20 <body>

21     <div>

22

23     </div>

24 </body>

25 </html>

　　注意：

　　Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。Safari 支持替代的 -webkit-transition 属性。

　注释：Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性。

二、动画　　

　　通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。

　　a、animation

　　animation 属性是一个简写属性，用于设置动画属性：

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mood

　　注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

　　b、animation-name　

　　animation-name 属性为 @keyframes 动画规定名称。

　　注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

　　c、animation-duration

　　animation-duration属性定义动画完成一个周期所需要的时间，以秒或毫秒计。

　　d、animation-timing-function

　　animation-timing-function 规定动画的速度曲线。速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。速度曲线用于使变化更为平滑。

　　e、animation-iteration-count

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

　　f、animation-direction

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

　　normal每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始，这是默认属性。alternate动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向，比如，ease-in 在反向时成为ease-out。reverse反向运行动画，每周期结束动画由尾到头运行。alternate-reverse反向交替，反向开始交替动画,第一次运行时是反向的，然后下一次是正向，后面依次循环.

　如果 animation-direction 值是 "alternate"，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。　　　

 1 <!DOCTYPE html>

 2 <html lang="en">

 3 <head>

 4     <meta charset="UTF-8">

 5     <title>Document</title>

 6     <style>

 7         div{

 8             width: 100px;

 9             height:100px;

10             background: red;

11         }

12         div:hover{

13             animation: donghua 3s linear 1ms 1 normal;

14         }

15         @keyframes donghua{

16             from{

17                 background: yellow;

18             }

19             50%{

20                 background: brown;

21             }

22             to{

23                 width: 300px;

24                 background: blue;

25             }

26         }

27     </style>

28 </head>

29 <body>

30     <div>

31

32     </div>

33 </body>

34 </html>

　　g.animation-fill-mood

　　这个 CSS 属性用来指定在动画执行之前和之后如何给动画的目标应用样式。

　　none动画执行前后不改变任何样式,forwards目标保持动画最后一帧的样式,backwards动画采用相应第一帧的样式,both动画将会执行 forwards 和 backwards 执行的动作。

　　当动画的次数设置成一次时；动画最后即使鼠标还悬停在元素上面，元素也会恢复默认状态。这个是和过渡的区别之一，同时动画可以提供同一个属性的多个变化值，二过渡只有两设置两个值。

　　请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

　使用动画：1、在对应的元素上设置动画的相关属性（animation属性）

　　　　　　　2、为动画设置多个关键帧。（@keyframes 动画名字）

　　可以为一个元素应用一个动画，元素选择器用逗号隔开即可。也可以为一个元素应用多个动画，元素同时执行多个关键帧。

　　g、animation-play-state

　　animation-play-state 属性规定动画正在运行还是暂停。注释：您可以在 JavaScript 中使用该属性，这样就能在播放过程中暂停动画。

三、变换

　　通过 CSS3 变换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。使用transform属性为元素应用变换。

　　translate(长度值或者百分比) 在水平方向上、垂直方向上平移元素。transform属性可以指定为关键字值none 或一个或多个<transform-function>值。

　　常用的<transform-function>：

　　a.translate()、translateX()、translateY()

　　translate用来在平面上平移一个元素。可以使用translate(tx) 或translate(tx, ty)，第一个参数指定x轴的平移距离，第二个参数指定y轴的平移距离。如果只指定了一个参数，那么X和Y轴都采用整个值。

　　　　translateX和translateY时translate属性的分开表达。translateX(tx) 是 translate(tx, 0) 的简写形式，translateY(ty) 是 translate(0, ty)的简写形式。

　　b.translate3d()和translateZ()

　　translate3d() 这个CSS 函数用于移动元素在3D空间中的位置。语法translate3d(tx, ty, tz)。Z轴垂直X、Y轴向外。translateZ(tz)相当于translate3d(0,0,tz);　　

　　c.rotate(a deg)　

　　rotate(a) CSS 函数定义一个旋转属性，将元素在不变形的情况下旋转到不动点周围(如 transform-origin 属性所指定) 。移动量a由指定角度定义;如果为正值，则运动将为顺时针，如果为负值，则为逆时针。默认是绕Z轴的旋转。

　　rotateX(a)、rotateY(a)、rotateZ(a)分别是设置绕X、Y、Z轴的旋转。　

　　可以和rotate()函数结合使用的是transform-origin: center;指定旋转变换的点，默认在元素的中心，可以使用两个百分数或者两个数字来指定。

　　d.scale()

　　scale() CSS 函数可改变元素的大小。它可以增大或减小元素的大小。

　　scale()函数是scaleX()和scaleY()简写。当scale()函数只指定一个参数的时候，X、Y方向上共享整个参数。

　　e.skew()

　　skew() 这个CSS函数是一种用于拉伸，或者说是平移，该函数会使得在每个方向上扭曲元素上的每个点以一定角度.skew(ax) 或skew(ax, ay).

　　skew()是skewX()和skewY()的简写。skewX()想做拉伸一个元素，skewY()向上拉伸一个元素。