CSS3变形、过渡与动画

一、变形

应用2D或3D变换

transform: none | <fn>+; /*  默认为none */

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

<fn>之移动

translate(<tx> [ ,<ty> ]?)  /* 2D */
translate3d(<tx>, <ty>, <tz>)  /* 3D */
/* 沿x轴移动<tx> = <len-%>，
  沿y轴移动<ty> = <len-%>，
  沿z轴移动<tz> = <length>。
 */

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

<fn>之旋转

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

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

<fn>之倾斜

skew(<x-angle> [ ,<y-angle> ]?)  /* 只有2D */

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

<fn>之缩放

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

• 可分解为scaleX(<x-num>)、scaleY(<y-num>)、scaleZ(<z-num>)。
• num为缩放系数，不可为负值。

变形原点

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

• <x>和<y>的默认值为50%或center。
• <z>的默认值为0。

子元素是否保留3D样式

transform-style: flat | preserver-3d;

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

3D透视

perspective: none | <num>; /* 透视距离 */
perspective-origin: <x> <y>?; /* 透视角度 */

• perspective是人眼到z=0平面的距离，默认值为none或0。
• <num>是一个数字，以像素（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 | <prop>#;
/* <prop> = all | <IDENT> */

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

过渡持续时长

transition-duration: <time>#;

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

延迟过渡时长

transition-delay: <time>#;

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

过渡的速度曲线

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

• 默认值是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 | <prop> ] || <time> || <timing-fn> || <time>;

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

三、自定义动画

动画名称

animation-name: <name>#;
/* <name> = none | <IDENT> */

动画持续时长

animation-duration: <time>#;

• 参考transition-duration。

延迟动画时长

animation-delay: <time>#;

• 参考transition-delay。

动画的速度曲线

animation-timing-function: <timing-fn>#;

• 参考transition-timing-function。

动画执行次数

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

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

动画执行方向

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

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

动画执行状态

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

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

动画执行前后的样式

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

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

关键帧

@keyframes <identifier> {
    [ <keyframes-selector> {<css-styles>;} ]*
}
/* <keyframes-selector> = [ from | to | <%> ]# */

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

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

属性简写

animation: [ <name> || <time> || <timing-fn> || <time> || <count> || <direction> || <fill-mode> || <play-state> || [ none | <identifier> ] ]#;

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