CSS Secret——Transitions & Animations

弹性动画

在真实世界中，很少有物体是线性的从A移动到B。想让你的界面动画显得更加生动，你需要模拟弹性的动画。
从技术角度来讲，弹性动画就是在动画达到终止值时，回去一点，再达到终止值时再回去一点，这一点比上一次要小。最终停在终止值。

我们可以使用最强大的关键帧动画来做这件事。
我们使用一个点击input弹出输入提示框来做例子：

<label> Your username: <input id="username" />
    <span class="callout">Only letters, numbers,  underscores (_) and hyphens (-) allowed!</span>
</label>

其基本样式：

.callout {
  position: absolute;
  max-width: 14em;
  padding: .6em .8em;
  border-radius: .3em;
  margin: .3em 0 0 -.2em;
  background: #fed;
  border: 1px solid rgba(0,0,0,.3);
  box-shadow: .05em .2em .6em rgba(0,0,0,.2);
  font-size: 75%;
}

.callout:before {
  content: "";
  position: absolute;
  top: -.4em;
  left: 1em;
  padding: .35em;
  background: inherit;
  border: inherit;
  border-right: 0;
  border-bottom: 0;
  transform: rotate(45deg);
}

使用关键帧动画：

@keyframes elastic-grow {
  from {
    transform: scale(0);
  }
  70% {
    transform: scale(1.1);
    animation-timing-function: cubic-bezier(.1,.25,1,.25); /* Reverse ease */
  }
}
input:not(:focus) + .callout {
  transform: scale(0);
}
input:focus + .callout {
  animation: elastic-grow .5s;
}
.callout {
  transform-origin: 1.4em -.4em;
}

但是使用关键帧动画在这里有点大材小用了，我们直接使用cubic-bezier()来控制transform的执行程度就好了。

input:not(:focus) + .callout:not(:hover) {
  transform: scale(0);
}
.callout {
  transition: .5s cubic-bezier(.25,.1,.3,1.5) transform;
  transform-origin: 1.4em -.4em;
}

这里当点击input时scale会从0最终变到1，但是由于cubic-bezier()的控制，这个过程并不是单调的，在50%时scale第一次达到1，70%时为1.1，100%时再回到1。这就达到了我们刚才要的效果。
但是这样还不够，在input失去焦点的时候，这个曲线就有问题了，会使scale变为-0.1，这个是不可接受的。于是我们需要一个新的transform来覆盖掉他。不用显示声明，使用默认的ease函数就好。

input:not(:focus) + .callout:not(:hover) {
  transform: scale(0);
  transition: .25s transform;
}
.callout {
  transition: .5s cubic-bezier(.25,.1,.3,1.5) transform;
  transform-origin: 1.4em -.4em;
}

逐帧动画

有时动画比较复杂，我们不方便使用CSS来创建，而是想用图片一帧一帧的播放，有人说那还不如用gif呢。但是gif不支持透明色，颜色位数太少，不好维护等等，都是问题。
我们可以使用一个包含所有帧的PNG sprite，然后使用动画在里面切换。当然这时就不能使用连续的cubic-bezier来控制动画进程了。使用step。这个函数是间断的，可以控制分几步完成动画，这正是我们想要的。

@keyframes loader {
  to { background-position: -800px 0; }
}

.loader {
  width: 100px; height: 100px;
  background: url(../img/loader.png) 0 0;
  animation: loader 1s infinite steps(8);
}

闪烁效果

闪烁效果可以使用动画来模拟：

@keyframes blink-smooth { 50% { color: transparent } }
.highlight { animation: 1s blink-smooth 3; }

这样看起来是我们想要的结果，但是要注意的是这里字出现和消失时的时间函数是一样的，都是加速着出现或消失，在这里或许看不出大问题，但是我们还是想要其出现和消失的过程是完全对称的，包括时间函数。
这里就可以使用animation-direction，它可以翻转每一个动画的过程，或者每奇数个，或者每偶数个。
这里我们就可以翻转每偶数个，前面的尾和后面的尾接起来，原来的两个由黑变白的动画过程被合为了一个。时间函数也完全对称了。

@keyframes blink-smooth {
  to {
    color: transparent
  }
}
.highlight {
  animation: .5s blink-smooth 6 alternate;
}

打字特效

<h1 id="typeEffect">CSS is awesome!</h1>
@keyframes typing {
  from {
    width: 0
  }
}
@keyframes caret {
  50% {
    border-color: currentColor;
  }
}
#typeEffect {
  width: 15ch; /* Width of text */
  overflow: hidden;
  white-space: nowrap;
  border-right: .05em solid transparent;
  animation: typing 6s steps(15),
            caret 1s steps(1) infinite;
}

ch这个单位在大多数字体中可以代表一个字符的长度，所以我们将动画设置为通过15步将宽度从0变为15ch。并设置一个永远闪烁的右边框，模拟输入光标。

状态连续的动画

有很多动画是在用户和它所在的元素有一些交互的时候才开始的，比如用户将鼠标浮动在某个元素上面，这个元素开始应用一些动画。这就涉及到一个问题，当动画还没播完的时候，用户就结束了与该元素的交互，这时的动画该做什么处理？
根据具体的使用场景，这里有可能会有两种处理：回到初始状态，等下次交互开始时再重新播放动画，那么回到初始状态的过程我们当然希望还是一个动画的过程，要不就太突兀了；还有一种就是直接暂停动画，下次用户恢复与该元素的交互时，再从上次停下的地方开始动画。
这里要提一下animation和transition的区别：
animation用作动画时，如果在动画未完成时就停止动画的执行，动画会直接跳回初始状态。在动画结束时，会直接跳回初始状态。可以暂停动画
transition用作动画时，如果在动画未完成时就停止动画的执行，动画会反向播放回原始状态。在动画结束时，会停在结束状态。不能暂停动画。
由于存在这些区别，animation和transition天然的就分别适应上面两种情况。
可以用这两个例子试试：

@keyframes test {
  to {
    width:400px;
  }
}
#testAnimation{
  height:100px;
  width:300px;
  background-color: #0074d9;
  color: #fff;

}
#testAnimation:hover{
  animation: test 2s;
  //width:400px;
}
#testTransition{
  height:100px;
  width:300px;
  background-color: #0074d9;
  transition: 2s width;
  color: #fff;
}
#testTransition:hover{
  width:400px;
}

transition的那种情况比较简单，这里就来说说要暂停动画的那个情况。

@keyframes panoramic {
  to { background-position: 100% 0; }
}

.panoramic {
  width: 150px; height: 150px;
  background: url('../img/tiger.jpg');
  background-size: auto 100%;
  animation: panoramic 10s linear infinite alternate;
  animation-play-state: paused;
}

.panoramic:hover, .panoramic:focus {
  animation-play-state: running;
}

动画用在元素本身，并暂停，在元素获得交互的时候再播放动画。

沿着环形路径的动画

我们想要一个元素沿着环形路径转圈圈。

两个元素的办法

<div class="path">
    <div class="avatar">
        <img src="img/marker_red.png"/>
    </div>
</div>

我们使用这样的HTML结构，path是一个圆形，avatar使用一个以圆为中心的rotate来旋转，当大的div沿着path旋转的时候，里面的img使用另一个小的rotate来抵消，使其一直是正的。

.path {
  width:300px;
  height:300px;
  border-radius: 50%;
  background-color: #ffbb33;
  text-align: center;
}
@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}
@keyframes spin-reverse {
  from {
    transform: rotate(1turn);
  }
}
.avatar {
  animation: spin 3s infinite linear;
  transform-origin: 50% 150px; /* 150px = path radius */
  //display: inline;
}
.avatar > img {
  animation: spin-reverse 3s infinite linear;
}

这里有优化的空间，这两个动画本质上是一样的，唯一不同的就是顺序，一个是从正着转360度，一个是反着转360度。那么这时，reverse就派上用场了。

@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}
.avatar {
  animation: spin 3s infinite linear;
  transform-origin: 50% 150px; /* 150px = path radius */
}
.avatar > img {
  animation: inherit;
  animation-direction: reverse;
}

一个元素的办法

之前我们使用两个元素，最主要的问题是origin只能有一个，而两个旋转的元素并不是绕着一个点旋转的。
但是我们可以绕过origin，看下面这两种变换，其实是同一种：

transform: rotate(30deg); 
transform-origin: 200px 300px;     

transform: translate(200px, 300px)
    rotate(30deg)    
    translate(-200px, -300px); 
transform-origin: 0 0;

所以你发现了么，其实origin是个语法糖。
这样的话，我们就不需要两个元素了：

<div class="path onlyEle">
   <img src="img/marker_red.png" class="avatar"/>
</div>

@keyframes spin1 {
  from {
    transform: translate(50%, 150px)
      rotate(0turn)
      translate(-50%, -150px)
      translate(50%,50%)
      rotate(1turn)
      translate(-50%,-50%)
  }
  to {
    transform: translate(50%, 150px)
      rotate(1turn)
      translate(-50%, -150px)
      translate(50%,50%)
      rotate(0turn)
      translate(-50%, -50%);
  }
}
.onlyEle .avatar {
  animation: spin1 3s infinite linear;
}

但是这里使用时有可能会有一点卡。