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