CSS中动画：transition , transform , animation

transform:

功能：对元素进行旋转，缩放，移动，倾斜

1.旋转 rotate

用法：transform: rotate(45deg);

共一个参数“角度”，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，上述代码作用是顺时针旋转45度。

2.缩放 scale

用法：transform: scale(0.5)  或者  transform: scale(0.5, 2);

参数表示缩放倍数；

• 一个参数时：表示水平和垂直同时缩放该倍率
• 两个参数时：第一个参数指定水平方向的缩放倍率，第二个参数指定垂直方向的缩放倍率。

3.倾斜 skew

用法：transform: skew(30deg)  或者 transform: skew(30deg, 30deg);

参数表示倾斜角度，单位deg

• 一个参数时：表示水平方向的倾斜角度；
• 两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度。

关于skew倾斜角度的计算方式表面上看并不是那么直观，这里借鉴某大拿绘制的图举例说明一下：

首先需要说明的是skew的默认原点transform-origin是这个物件的中心点

skewX(30deg) 如下图：

 

skewY(10deg) 如下图：

 

skew(30deg, 10deg) 如下图：

 

我当初就是看到此图瞬间理解的。

4.移动 translate

用法：transform: translate(45px)  或者 transform: skew(45px, 150px);

参数表示移动距离，单位px，

• 一个参数时：表示水平方向的移动距离；
• 两个参数时：第一个参数表示水平方向的移动距离，第二个参数表示垂直方向的移动距离。

5.基准点 transform-origin

在使用transform方法进行文字或图像的变形时，是以元素的中心点为基准点进行的。使用transform-origin属性，可以改变变形的基准点。

用法：transform-origin: 10px 10px;

共两个参数，表示相对左上角原点的距离，单位px，第一个参数表示相对左上角原点水平方向的距离，第二个参数表示相对左上角原点垂直方向的距离；

两个参数除了可以设置为具体的像素值，其中第一个参数可以指定为left、center、right，第二个参数可以指定为top、center、bottom。

6.多方法组合变形

上面我们介绍了使用transform对元素进行旋转、缩放、倾斜、移动的方法，这里讲介绍综合使用这几个方法来对一个元素进行多重变形。

用法：transform: rotate(45deg) scale(0.5) skew(30deg, 30deg) translate(100px, 100px);

这四种变形方法顺序可以随意，但不同的顺序导致变形结果不同，原因是变形的顺序是从左到右依次进行，这个用法中的执行顺序为1.rotate  2.scalse  3.skew  4.translate

transition:

功能：在CSS中算过渡，非动画。

语句：

transition: property duration timing-function delay;

transition-property	规定设置过渡效果的 CSS 属性的名称。
transition-duration	规定完成过渡效果需要多少秒或毫秒。
transition-timing-function	规定速度效果的速度曲线。
transition-delay	定义过渡效果何时开始。

 举例： object.style.transition="width 2s" 

            在2s内将object的width属性进行变化，具体width怎么变在js中写明。

若object有很多属性一起变，比如宽高角度等等，那么久直接写：object.style.transition="all 2s"

也可以分开写：

transition: width 2s, height 1s；

animation:

功能：在CSS中算动画，非过渡。

用法：在 @keyframes 中规定某项 CSS 样式，注意可能要兼顾不同浏览器，例如Chrome 和 Safari 需要前缀 -webkit-

举例：

先用@keyframes写好规则，把这个动画脚myfirst

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}

然后绑定在一个元素上

通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：

• 规定动画的名称
• 规定动画的时长

div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s;	/* Firefox */
-webkit-animation: myfirst 5s;	/* Safari 和 Chrome */
-o-animation: myfirst 5s;	/* Opera */
}

动画是使元素从一种样式逐渐变化为另一种样式的效果。

您可以改变任意多的样式任意多的次数。

请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

举例：

@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

总结：

一般简单动画变形用transform+transiton就可以实现，在transform中写怎么变，在transition中写明变化所用时间，就是动画了。

这种方法好处是可以在js中进行更改，读取参数。

举例：

css:

transform:rotate(20deg);

js:

var test = object.style.transform;  此时test值为"rotate(20deg)",string类型，然后进行字符串切割

test = test.substring(7,text.length); 此时test为"20deg)"

text = parseInt(test); 取出整数20，即为css中设置的值。

可以在更改后再写进去

object.style.transform = "rotate(" + test + "deg)";