css：关于transition，transform，animation的特效与动画

我们写css动画，必不可少会用到animation跟transform，transition，但是经常搞混使用，傻傻分不清楚

下面来讨论讨论他们用到的场景跟使用方式

 

w3c里transform api如下

 

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

translate(x, y)方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。x, y的值可以取正负，分别表示表示向不同的方向偏移。

rotate(angle)方法， 表示旋转angle角度。angle为正时，按顺时针角度旋转，为负值时，元素逆时针旋转。
scale(x, y)方法，表示元素在x轴和y轴上的缩放比例，参数大于1时，元素放大，小于1时，元素缩小。
skew(x-angle,y-angle)方法，用来对元素进行扭曲变行，第一个参数是水平方向扭曲角度，第二个参数是垂直方向扭曲角度。其中第二个参数是可选参数，如果没有设置第二个参数，那么Y轴为0deg
matrix(a,b,c,d,e,f)方法， 以一个含六值的变换矩阵的形式指定一个2D变换， a 水平缩放 , b 水平倾斜,  c 垂直倾斜,  d 垂直缩放 , e 水平移动,  f 垂直移动

 

一般使用方法

  1.transform：translate(50px, 30px)   根据给定的 left（x 坐标） 和 top（y 坐标）

div:hover {
    width:200px;
    transform: translate(50px, 30px);
    -webkit-transform: translate(50px, 30px);
    -o--transform: translate(50px, 30px);
    -mz-transform: translate(50px, 30px);
    -ms-transform: translate(50px, 30px);
}

2.transform: rotate(20deg);    旋转20度

3.transform: scale(1.5, 0.8); /*宽度变为原来的1.5倍，高度变为原来的0.8倍*/

div:hover {
    transform: scale(1.2, 0.8);
}

transition 与 animiation

transition 必须靠事件触发，可以是hover

 

W3C标准中对css3的transition这是样描述的：“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。”  前提必须有事件触发

transition属性的值包括以下四个：

transition-property： 指定对HTML元素的哪个css属性进行过渡渐变处理，这个属性可以是color、width、height等各种标准的css属性。
transition-duration：指定属性过渡的持续时间
transition-timing-function：指定渐变的速度：
1、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)；
2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)；
3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)；
4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0)；
5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)；
6、cubic-bezier：（该值允许你去自定义一个时间曲线）， 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。
transition-delay：指定延迟时间，也就是经过多长时间才开始执行过渡过程。

例：

1. transition： width 2s ease 2s； // property duration timimgfunction delay；过渡、、

div {
    width:100px;
    height:100px;
    background: #000;

}
div:hover {
    width:200px;
    transition: width 2s ease-in-out 1s;//fread
}

animation一般用来定义多次循环动画，不需要事件触发

简写属性形式:

animation:
[animation-name] [animation-duration] // 动画的名称、持续时间
[animation-timing-function][animation-delay] // 关于时间的函数(properties/t)、延迟时间
[animation-iteration-count] [animation-direction] // 播放次数、播放顺序
[animation-fill-mode] [animation-play-state]; // 播放前或停止后设置相应样式、控制动画运行或暂停

1.animation-timing-function属性定义了动画的播放速度曲线。
与上面相同

2.动画方向（animation-direction）

animation-direction属性表示CSS动画是否反向播放。
可选配置参数为:

single-animation-direction = normal | reverse | alternate交替播放 | alternate-reverse

3.动画迭代次数（animation-iteration-count）

animation-iteration-count该属性就是定义我们的动画播放的次数。次数可以是1次或者无限循环。
默认值只播放一次。

single-animation-iteration-count = infinite | number

4.动画填充模式（animation-fill-mode）

animation-fill-mode是指给定动画播放前后应用元素的样式。

 

single-animation-fill-mode = none | forwards | backwards | both

 

5.动画播放状态（animation-timing-function）

animation-play-state: 定义动画是否运行或者暂停。可以确定查询它来确定动画是否运行。
默认值为running

single-animation-timing-function = running | paused

例：

div {

animation:myfirst 5s linear 2s infinite alternate;

}

@keyframes myfirst /*定义动画名*/
{
0% {background:red; left:0px; top:0px;} /*定义起始帧样式，0%可以换成from*/
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;} /*定义结束帧样式，100%可以换成to*/
}