CSS3中动画属性transform、transition和animation

Transform：变形

　　在网页设计中，CSS被习惯性的理解为擅长表现静态样式，动态的元素必须借助于javascript才可以实现，而CSS3的出现改变了这一思维方式。CSS3除了增加革命性的创新功能外，还提供了对动画的支持，可以用来实现旋转、缩放、平移、扭曲和过渡效果等等，这些功能再一次证明了CSS3功能的强大和无限潜能。

　　CSS3实现元素变形的基础来源于新增的transform属性，该属性可用于实现元素的旋转、缩放、平移、扭曲等效果。目前webkit内核支持-webkit-transform私有属性，Mozilla Geckos内核支持-moz-transform私有属性，IE浏览器支持-ms-transform私有属性。

　　在部分的test case当中，每每演示transform属性的，看起来好像都是带动画。这使得小部分直觉化思维的人（包括我）认为transform属性是动画属性。而恰恰相反，transform属性是静态属性，一旦写到style里面，将会直接显示作用，无任何变化过程。transform的主要用途是用来做元素的特殊变形，对于做设计的人来说并不是很陌生，简单的来说就是css 的图形变形工具。

　　关于图形变形的基础条件当中的原点设定，在css里面使用的是transform-origin来定义的。

　　关于图形变化的模式，css3标准当中transform-style来定义。默认是flat，展现出来的是简单的效果。而preserve-3d则将空间呈现为3d模式。

　　如果需要使用3d模式，必须先指定style为3d，并在任意父元素上增加 perspective及 perspective-origin 来指定透视点。

　　总体看来 css transform的属性和原来使用的left ，right ，top， bottom 的属性从动静角度来说没有任何区别，因此使用的时候应该将transform归类到这类定位变形的静态属性里面。

用法分析：

　　Transform字面上就是变形、改变的意思。在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和平移translate。

　　语法：

　　　　transform ： none | transform-function [ transform-function ]*

　　　　也就是：transform: rotate | scale | skew | translate;

　　none:表示不进么变换；transform-function表示一个或多个变换函数，以空格分开；换句话说就是我们可以同时对一个元素进行transform的多种属性操作，例如rotate、scale、translate三种。但这里需要提醒大家，以往我们叠加效果都是用逗号（“，”）隔开，但transform中使用多个属性时只需要用空格隔开。

　　主要是以下几个点：1、旋转rotate；2、平移translate；3) 缩放scale；4) 扭曲skew；5)transform-origin(x, y)

　　这里就只说skew和transform-origin：

　　skew(angle [, angle]) ：设置X轴与Y轴上的斜切变换。skew是用来对元素进行扭曲变形，第一个参数是水平方向扭曲角度（即垂直的高度不变，水平方向变），第二个参数是垂直方向扭曲角度，其中第二个参数是可选参数，如果没有设置第二个参数，那么Y轴为0deg。同样是以元素中心为基点，我们也可以通过transform-origin来改变元素的基点位置。具体展示请查看。

　　还有改变元素基点的transform-origin：它的主要作用就是在进行transform动作之前可以改变元素的基点位置，因为元素默认基点就是其中心位置，换句话说没有使用transform-origin改变元素基点位置的情况下，transform进行的rotate、translate、scale、skew等操作都是以元素自己的中心位置进行变化的。

　　但有时候我们需要在不同的位置对元素进行这些操作，那么就可以使用transform-origin来对元素进行基点位置改变，使元素基点不在中心位置，以达到需要的基点位置，下面我们主要来看看其使用规则。

　　transform-origin(x, y)：用来设置元素的运动的基点（参照点），默认点是元素的中心点。其中x和y的值可以是百分值、em、px，其中x也可以是字符参数值left、center、right；y和x一样除了百分值外还可以设置字符参数值top、center、bottom，这样的设置有点像background-position的写法一样。

Transition：过度

　　在页面开发中经常会借助JS来书写大量的特效，以获得较好的页面感官效果。但是真正到了使用JS来操作的时候，往往会因为思维逻辑不清晰而显得很凌乱。同时为了避免JS对页面的性能产生影响，我们今天就来尝试下不借助任何JS，转而使用CSS3过渡来书写出更好的动画效果。

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

　　在实际的开发中，经常会遇到手机上的JS动画卡顿现象，所以需要借用其他办法来替代使用，而CSS3的过渡就可以很好的解决这个问题

　　transition属性是一个简单的动画属性，非常简单非常容易用。可以说它是animation的简化版本，是给普通做简单网页特效用的。比如你有如下两个样式：

<style>
div
{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div:hover
{
width:300px;
}
</style>

　　同时，如果在transition的动画当中，属性值有了新的变化，则会中断当前的动画执行，并将中断时的属性值提供给新的动画作为起始值来计算新的动画效果。

Transition的语法

　　下面同样从其语法和属性值开始一步一步来学习transition的具体使用。

　　transition ： <'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>;

　　transition主要包含四个属性值：

　　　　1、执行变换的属性：transition-property；

　　　　2、变换延续的时间：transition-duration；

　　　　3、在延续时间段，变换的速率变化：transition-timing-function；

　　　　4、变换的延迟时间：transition-delay。

　　有时不只改变一个CSS效果的属性，而是想改变两个或者多个CSS属性的transition效果，那么只要把几个transition的声明串在一起，用逗号（“,”）隔开，然后各自可以有各自不同的延续时间和其时间的速率变换方式。

　　但需要值得注意的一点：transition-delay与transition-duration的值都是时间，所以要区分它们在连写中的位置，一般浏览器会根据先后顺序决定，第一个可以解析为时间的值为transition-duration，第二个为transition-delay。

Animation：动画

　　单从Animation字面上的意思，就知道是“动画”的意思。但CSS3中的Animation只应用在页面上已存在的DOM元素上，而且跟Flash和JavaScript以及jQuery制作出来的动画效果又不一样，因为使用CSS3的Animation制作动画可以省去复杂的js、jQuery代码。

　　当然CSS3也有一点不足，我们运用Animation能创建自己想要的一些动画效果，但是有时会有卡顿现象。所以如果想要制作比较好的动画，建议大家还是使用CSS3与js相结合的书写方式。

　　做过Flash动画的人都会知道，Flash里面有两个基础武器：时间轴和关键帧。前面在使用transition制作一个简单的transition效果时，包括了初始属性和最终属性，一个开始执行动作时间和一个延续动作时间以及动作的变换速率。其实这些值都只是一个中间值，如果我们要控制的更细一些，比如说要第一个时间段执行什么动作，第二个时间段执行什么动作。这样再用Transition就很难实现了，所以此时也需要这样的一个“关键帧”来控制。

　　在官方的Introduction上介绍这个属性是transition属性的扩展。但是这个简单的介绍里面包含了不简单的东西：keyframes。

　　Keyframes具有其自己的语法规则，它的命名是由"@keyframes"开头，后面紧接着是这个“动画的名称”加上一对花括号“{}”，括号中就是一些不同时间段样式规则，有点像我们css的样式写法一样。

　　对于一个"@keyframes"中的样式规则是由多个百分比构成的，如“0%”到"100%"之间，可以在这个规则中创建多个百分比，分别在每一个百分比中给需要有动画效果的元素加上不同的属性，从而让元素达到一种在不断变化的效果，比如说移动、改变元素颜色、位置、大小、形状等。

　　不过有一点需要注意的是，可以使用“from”和“to”来代表一个动画是从哪开始，到哪结束。也就是说这个 "from"就相当于"0%"，而"to"相当于"100%"。值得一说的是，关键帧中的数值段必须是百分数，如果不是百分数，这个keyframes是无效的，不会起任何作用。因为keyframes的单位只接受百分比值。

　　看一个简单的 keyframes 的示例：

<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}

@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}
</style>

　　上面这个代码展示了一个keyframes 'wobble'，其中 0％ 代表在变化中不同时间点的属性值，你可以较精确的控制动画变化中任何一个时间点的属性效果。而animation则根据这个keyframes提供的属性变化方式去计算元素动画当中的属性。与 transition 不同的是，keyframes提供更多的控制，尤其是时间轴的控制，这点让css animation更加强大，使得flash的部分动画效果可以由css直接控制完成，而这一切，仅仅只需要几行代码，也因此诞生了大量（比起flash来说算是大量了）基于css的animation tools，用来取代flash的动画部分。

　　另外在animation属性里面还有一个最重要的就是：animation-fill-mode，这个属性标示是以(from/0%)指定的样式 还是以(to/100%)指定的样式为动画完成之后的样式。这个很方便我们控制动画的结尾样式，保证动画的整体连贯。

　　CSS3的Animation类似于Transition属性，都是随着时间改变元素的属性值。主要区别是Transition需要触发一个事件(hover事件或click事件等)才会随时间改变其CSS属性；而Animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素CSS的属性值，从而达到一种动画的效果。

　　Animation和Transition一样有自己相对应的属性，那么在Animation主要有以下几种属性：动画名称(animation-name)、动画持续时间(animation-duration)、动画的速度曲线(animation-timing-function)、动画延迟时间(animation-delay)、动画播放次数(animation-iteration-count)、动画播放方向(animation-direction)。

参考：

http://www.jb51.net/css/496935.html

https://mp.weixin.qq.com/s/aPWZPhIb1a928okjcLNPhA

https://mp.weixin.qq.com/s/IPS6oZRM_Ie6ZQU21-V9QA

https://mp.weixin.qq.com/s/fmo5ogDucgyYw_cl5Fck0Q