CSS3变形、过渡与动画

一、变形

应用2D或3D变换

transform: none | +; /*  默认为none */

• 所有变形只对block元素有效。
• 的书写顺序会影响显示的效果。
• 变形兼容性：IE8-不支持；IE9和Opera只支持2D变换，IE9需要前缀-ms-；Chrome和Safari需要前缀-webkit-。

之移动

translate( [ , ]?)  /* 2D */
translate3d(, , )  /* 3D */
/* 沿x轴移动 = ，
  沿y轴移动 = ，
  沿z轴移动 = 。
 */

• 可分解为translateX()、translateY()、translateZ()。
• 、、分别表示元素自原点向左、向下、向外的位移，默认值为0；负值表示反向移动。
• 参照物是元素自身的宽高。

之旋转

rotate()  /* 2D，围绕z轴旋转 */
rotate3d(, , , )  /* 3D，以(x,y,z)与原点的连线为轴旋转 */

• rotate3d可分解为rotateX()、rotateY()、rotateZ()。
• 的单位为deg，表示旋转的角度；正值为顺时针旋转，负值为逆时针旋转。

之倾斜

skew( [ , ]?)  /* 只有2D */

• 可分解为skewX()、skewY()。
• 表示y轴向x轴倾斜的角度，单位为deg，正值为逆时针倾斜。
• 表示x轴向y轴倾斜的角度，单位deg，正值逆时针，默认值为0。

之缩放

scale([,]?)  /* 2D，y值缺省时应用x值 */
scale3d(, , )  /* 3D */

• 可分解为scaleX()、scaleY()、scaleZ()。
• num为缩放系数，不可为负值。

变形原点

transform-origin:  ? ?; /*  省略表示2D原点 */
/* x坐标 = left | center | right | ，
  y坐标 = top | center | bottom | ，
  z坐标 = ，
   =  | <%>。
 */

• 和的默认值为50%或center。
• 的默认值为0。

子元素是否保留3D样式

transform-style: flat | preserver-3d;

• 默认值为flat，即子元素不保留其3D位置。

3D透视

perspective: none | ; /* 透视距离 */
perspective-origin:  ?; /* 透视角度 */

• perspective是人眼到z=0平面的距离，默认值为none或0。
• 是一个数字，以像素（px）计。
• perspective-origin定义视图的底部位置（z=0平面），值参考transform-origin。
• 目前主流浏览器都不支持透视，只有Chrome和Safari支持带-webkit-前缀的。

元素背面可见

backface-visibility: visible | hidden;

• 默认值为visible，即背面可见。
• 用于不希望看到旋转元素的背面。
• IE9-和Opera14-不支持，Chrome、Safari和Opera15+需要加-webkit-前缀。

二、过渡

指定应用过渡效果的CSS属性

transition-property: none | #;
/*  = all |  */

• 默认值为all，表示所有属性都会应用过渡效果。
• none表示不应有过渡效果，属性值会在瞬间变化。
• 是属性名称，由小写字母、数字、下划线和连接符组成，不能由数字开头。

过渡持续时长

transition-duration: #;

• 表示过渡属性从旧值变到新值需要的时间，单位为s或ms。
• 默认值为0，表示无过渡效果，属性值瞬间变化完成；不接受负值。

延迟过渡时长

transition-delay: #;

• 表示过渡开始前要等待的时间，单位为s或ms。
• 默认值为0，表示不等待、直接开始过渡。
• 负值会使过渡立即开始，并跳过指定时长的过渡动画。

过渡的速度曲线

transition-timing-function: #;
/*  = linear |  |  | ，
   = ease | ease-in | ease-out | ease-in-out | cubic-bezier(,,,)，
   = step-start | step-end | steps( [ , [ start | end ] ]?)，
   = frames()。
 */

• 默认值是ease，相当于cubic-bezier(.25, .1, .25, .1)，表示两头慢中间快。
• linear是匀速曲线，相当于cubic-bezier(0, 0, 1, 1)。
• ease-in表示开头慢，ease-out表示结束慢。
• ease-in-out也表示两头慢，但变化幅度更大一些，相当于cubic-bezier(.42, 0, .58, 1)。

属性简写

transition: [ none |  ] ||  ||  || ;

• 第一个代表transition-duration，第二个代表transition-delay。
• 过渡支持多值的写法，用逗号隔开，可以给多个不同的CSS属性应用不同的过渡效果。上述所有支持多值的属性，其值都是一一对应各个transition-property的。
• IE9-不支持过渡，Chrome和Safari需要在所有属性前加-webkit-前缀。

三、自定义动画

动画名称

animation-name: #;
/*  = none |  */

动画持续时长

animation-duration: #;

• 参考transition-duration。

延迟动画时长

animation-delay: #;

• 参考transition-delay。

动画的速度曲线

animation-timing-function: #;

• 参考transition-timing-function。

动画执行次数

animation-iteration-count: #;
/*  = infinite |  */

• 默认值为1，表示动画只执行一次。
• infinite表示无限执行；不可为负值。

动画执行方向

animation-direction: #;
/*  = normal | reverse | alternate | alternate-reverse */

• 默认值为normal，表示正向执行（从0%执行到100%）。
• alternate表示正向往返执行（从0%到100%再到0%），也会跟着往返。
• reverse与normal相反，alternate-reverse与alternate相反。

动画执行状态

animation-play-state: #;
/*  = running | paused */

• 默认值为running，表示动画现在的状态是执行。
• paused是暂停的意思，所以再次开始时是从暂停处开始的。

动画执行前后的样式

animation-fill-mode: #;
/*  = none | forwards | backwards | both */

• 默认值为none，表示动画执行前后不应用任何样式。
• forwards表示动画结束后保持最后一帧的样式。
• backwards表示动画开始前保持第一帧的样式。
• both表示同时应用forwards和backwards。

关键帧

@keyframes  {
    [  {;} ]*
}
/*  = [ from | to | <%> ]# */

• 是帧的名称，对应应用该帧的animation-name；命名应符合CSS命名规则。
• 是触发关键帧的时间点，可分组，类似css-selector。
• 关键帧的触发是按照百分比从小到大来的，因此值的书写顺序不影响显示结果；但是如果出现了重复的时间点，则舍弃前一个时间点的全部样式。
• from==0%，代表动画的开始；to==100%，代表动画的结束。这两个时间点是必需的。
• @keyframes不可用于内联样式，且会忽略!important。
• 示例：

  @keyframes myAnimation {
    from, to {background-color:#f00; top:0%;}
    50% {background-color:#0ff; top:50%;}
  }
  

属性简写

animation: [  ||  ||  ||  ||  ||  ||  ||  || [ none |  ] ]#;

• 第一个代表animation-duration，第二个代表animation-delay。
• animation与transition的区别：前者直接执行，后者需要触发才执行。
• 动画支持多值的写法，用逗号隔开，可以同时设置不同的动画。上述所有支持多值的属性，其值都是一一对应各个animation-name的。
• IE9-不支持自定义动画，Chrome和Safari需要在所有属性前加-webkit-前缀。