10分钟入门 CSS3 Animation

简介

Animation可让你不用依赖javascript或jquery，用纯CSS在网页中轻松实现各类动画效果。

兼容性

animation在绝大部分主流浏览器都获得了很好的支持！还在兼容IE9的同窗要谨慎使用。

CSS 坐标系

在了解animtion以前，咱们有必要先了解css的坐标系，由于不少的animation效果都和元素的坐标密切相关。在css3中网页再也不是一个二维平面，而是一个三维空间，水平方向、竖直方向和垂直屏幕方向分别对应三维坐标系的x，y，z轴，以下图所示。箭头方向为正向，反之为负向（注意y轴方向与常规笛卡尔坐标系相反）。

Animations

1. Transforms

transform中文译为“转换”，但我更倾向于称呼它“变形”（大名鼎鼎的变形金刚叫transformer）。咱们可使用transform function使html元素产生各类各样的变形，好比平移、缩放、旋转、扭曲等，并且不会影响正常的文档流（document flow）。

(1) Translate

Translate通常译为“翻译”，但在css里面通常用做“平移”，由于translate用于改变html元素的在3d坐标系位置。translate支持在坐标系内任意方向移动（经过任意组合x、y、z方向的向量），单位能够是长度单位和百分比（百分比是相对于被平移的元素自身尺寸，x轴是相对于width，y轴是相对于height，而在z轴方向因为元素是没有‘厚度’的，因此对于z方向不能用百分比表示），例如：

transform: translateX(100px) translateY(50%) translateZ(-100px);
// 或者简写
transform: translate3d(100px, 50%, 2em);

注意：

1. translate是xy平面内的2维平移，translate3d是xyz空间内的三维平移；
2. translate也能够单独书写，如 translate: 50% 105px 5rem;，可是该特性尚在实验阶段，不少浏览器不支持，因此现阶段仍是配合transform使用。详情参考 MDN translate。

(2) Scale

Scale意为“缩放”，顾名思义，是用于改变元素的大小。例如：

transform: scaleX(2) scaleY(0.5) scaleZ(1);
// 或者简写
transform: scale3d(2, 0.5, 1);

scale方法接收任意数字（正负整数、小数、0）做为参数，该参数为缩放系数，系数>1 效果为放大，0<系数<1 效果为缩小，系数=0 元素尺寸变为无限小而不可见，系数<0 效果为 >0 时的镜像（具体效果可本身实验）。

与translate相似，scale也有2维 scale() 和三维 scale3d()之分，也能够单独书写，此处不赘述。

(3) Rotate

Rotate意为“旋转”，支持将元素以x、y、z为轴旋转，旋转正方向为面朝坐标轴正向逆时针方向，可参考上面坐标系示意图。rotate方法接收一个角度做为参数，角度>0 正向旋转，角度<0 负向旋转，例如：

// 默认绕z轴旋转
transform: rotate(90deg);

transform: rotateX(30deg) rotateY(60deg) rotateZ(-90deg);

与translate和scale不一样，rotate不能简写为transform: rotate3d(30deg, 60deg, 90deg)的形式，rotate3d的用法为：前三个参数为数字，表明x、y、z方向的向量，相加获得向量v，第四个参数为角度，表示以向量v为轴逆时针旋转的角度，语法以下：

transform: rotate3d(1, 2, 3, 90deg);

与translate和scale相似，rotate也能够做为单独的css属性，但还在实验阶段。

出于篇幅考虑，我只列出三种最经常使用的tranform function，剩下的transform function请参考 MDN transform function。

(4) 组合

咱们能够将不一样的transform方法组合起来使用，如：

transform: translateY(200px) rotateZ(90deg) scale(3);

组合方法的执行顺序是从右往左，即先执行scale，而后rotate，最后translate，产生的效果是逐次累加的。方法书写的顺序对最后效果有很大的影响，看下面例子，沿y轴平移和放大，顺序不一样，产生的结果有明显差异：

若是先translate再scale，平移的距离也将被等比例缩放，而先scale再translate则不会。因此在使用transform需按照 translate -> rotate -> scale 的顺序书写，让scale先执行，以避免放大translate的效果，而rotate先translate执行以防止带着平移的距离一块儿转动。我以为这是transform目前不方便的地方，由于方法之间相互干扰并不容易理解，书写顺序也不容易记住。在将来有望经过使用独立的css transform属性解决这一问题，由于独立的transform属性对书写顺序没有依赖，方法之间彼此不会干扰。

Transition

Transition翻译为“过渡”，强调的是过程。在css中指在一段时间内，元素从一个状态（对应一个css属性）过渡到另外一个状态的动态过程。咱们能够决定以何种方式过渡过渡和花费多少时间。

例如，咱们把鼠标悬浮到云上面的时候使其变大一些能够这么写：

.cloud{
    width: 240px;
    transition: 1s;
}
.cloud:hover{
    width: 320px;
}

效果：

transition能够和transform结合使用，好比咱们可让云变大的同时转一圈：

.cloud:hover{
    width: 320px;
    transform: rotate(360deg);
}

效果：

咱们能够给不一样的效果设置不一样的过渡时间：

.cloud{
    width: 240px;
    transition: width 1s, transform 0.5s;
}

咱们也能够给效果设置延时时间，好比咱们等宽度增大以后再旋转：

.cloud{
    width: 240px;
    transition: width 1s, transform 0.5s 1s;
}

效果：

咱们还能够给每一个效果设置不一样的timing function，用于控制加速效果。

好比咱们可让旋转的速度逐渐加快：

.cloud{
    width: 240px;
    transition: transform 2s ease-in;
}

.cloud:hover{
    transform: rotate(1080deg);
}

效果：

更多的timing function请后面会进一步讨论，也能够参考 MDN transition-timing-functions

Keyframes

(1) 基本用法

Keyframe中文译为“关键帧”，是animation中很强大的功能，通俗说就是咱们能够经过定义一段动画中的关键点、关键状态来建立动画。Keyframes相比transition对动画过程和细节有更强的控制。

咱们先看一个例子（部分代码省略）

html:

<div class="sky"></div>
<div class="grass"></div>
<div class="road">
  <div class="lines"></div>
  <img src="http://lc-jOYHMCEn.cn-n1.lcfile.com/a3f630c957a4b32d0221.png" class="mario animated">
</div>

css：

.mario{
  position: absolute;
  left: 0px;
  width: 100px;
}

.animated{
  animation-name: drive;
  animation-duration: 1s;
  animation-timing-function: linear;
}

@keyframes drive {
  from{ transform: translateX(0) }
  to{ transform: translateX(700px) }
}

效果：

其中 drive 是该keyframes的名称，from, to 是keyframes播放过程的时间起点和终点，时间点也能够用百分比表示，如50%，from， to 等价于 0%, 100%。每一个时间点对应一个css状态，表明一个关键帧（keyframe）。keyframes定义完成后使用方法以下：

animation也有简写形式，如：

animation: slidein 3s ease-in 1s infinite reverse both running;

但这种对书写顺序有必定要求（delay要写在duration后面，其余参数无顺序要求，css会经过传入的关键词识别）。

(2) Animation Delay

经过animation-delay，咱们能够给动画延迟执行：

animation-delay: 2s;

(3) Animation Fill Mode

forwards

在上面的例子中能够看到马里奥运动到右边以后又回到了起点，若是咱们想让他运动完成后就停留在右边呢？很简单，咱们设置annimation fill mode就能够了：

animation-fill-mode: forwards

forwards 表示动画完成后，元素将保持最后一帧的状态。

backwards

与之相对的还有 backwards，backwards表示并非动画完成后元素变回第一帧的状态，而是表示当设置了animation-delay时，在动画开始前的等待过程当中，马上给元素应用第一帧的状态。咱们将上面的例子稍做修改看一下效果：

.animated{
  animation-name: drive;
  animation-duration: 1s;
  animation-fill-mode: backwords;
  animation-delay: 1s;
  animation-timing-function: linear;
}

@keyframes drive {
  from{ transform: translateX(350px) }
  to{ transform: translateX(700px) scale(2) }
}

效果：

能够看到，动画开始以前小人立马移动到350px处，1s以后才开始动画。

both

显而易见，both会同时应用forwards和backwards两种规则，即在delay时先应用第一帧的状态，结束时保持最后一帧的状态。

(3) Animation Repeat

咱们能够经过 animation-iteration-count 设置动画循环播放的次数，好比：

animation-iteration-count: 3;

// 无限循环
animation-iteration-count：infinite;

就像这样：

(4) Animation Direction

normal

正常方向，也是默认方向，即先from，再to。

reverse

与正常方向相反，即先to，再from。例如：

.animated{
  ...
  
  animation-direction: reverse;
}

@keyframes drive {
  from{ transform: translateX(-100px) rotateY(180deg) }
  to{ transform: translateX(862px) rotateY(180deg)}
}

效果：

alternate

alternate意为“交替”，即normal和reverse交替之行，先normal再reverse。

reverse alternate

反向交替，先reverse再normal。

(4) Animation Timing function

和transition同样，keyframes也能够设置timing function，经常使用的timing function概括以下：

1. ease：默认方法，初速度较慢，而后加速再减速
2. ease-in：初速度最慢，而后一直加速
3. ease-out：初速度最快，而后一直减速
4. ease-in-out：初速度较慢，而后加速再减速，与ease的区别在于加速减速过程是对称的
5. linear：恒速运动

直观表现以下（codepen）：

除了上面现成的方法，咱们能够经过贝塞尔曲线自定义速度曲线。咱们能够在 http://cubic-bezier.com 可视化的建立咱们本身的贝塞尔曲线。好比建立一个刚开始极慢，忽然变得极快的曲线：

css:

animation-timing-function: cubic-bezier(1,.03,1,-0.03);

效果：

是否是挺神奇！

(5) Chain Animation

咱们能够将多个animation串联使用，好比咱们想让小人在行驶的过程当中跳跃，能够这么写：

css:

.mario {
  ...
  
  animation: drive 3s both infinite linear, jump 0.5s 1.2s ease-in-out infinite;
}

@keyframes jump {
  0% { top: -40px; }
  50% { top: -120px; }
  100% { top: -40px; }
}

效果：

实践

本文目的在于普及css3 animation的基础，并未彻底覆盖animation的知识，未涉及和讲解的知识请你们见谅 。 掌握上述知识后，咱们就已经能够用animation作出丰富的动画效果了，下面列出一些codepen上的小例子：

1. full mario demo
2. animated popup
3. fly items to shopping cart
4. flipping cards