妙啊！动画还可以这样控制？

作者：chokcoco

来源：SegmentFault 思否社区

今天，有在群里看到这样一个问题：有一个动画，一开始静止处于第一帧，只在用户 hover 的时候运行动画，在运行一次后停止，并且停留在最后一帧，使用 CSS 可以完成么？

像是这样：

一个非常有意思的问题，答案是可以的。我们抽取一下其中的关键点：

动画只运行一次，未运行前处于第一帧，运行完后处于最后一帧

动画通过 hover 驱动，只有用户 hover 元素的时候，动画才进行

animation-fill-mode 控制元素在各个阶段的状态

首先，动画只运行一次，未运行前处于第一帧，运行完后处于最后一帧。

这个刚好利用 CSS 动画的 animation-fill-mode: both 即可。

animation-fill-mode: backwards：可以让元素在动画开始之前的样式为动画运行时的第一帧，动画结束后的样式则恢复为 CSS 规则设定的样式

animation-fill-mode: forwards：元素在动画开始之前的样式为 CSS 规则设定的样式，而动画结束后的样式则表现为由执行期间遇到的最后一个关键帧计算值（也就是停在最后一帧）

而， animation-fill-mode: both 兼顾了上面两种模式的特点， 可以使得动画开始前的样式为动画运行时的第一帧，动画结束后停在最后一帧。

反向利用 animation-play-state 实现 hover 触发动画行进

而 动画通过 hover 驱动，只有用户 hover 元素的时候，动画才进行这一点，利用 animation-play-state 即可。

我们都知道，正常情况下，动画应该是运行状态，那如果我们将动画的默认状态设置为暂停，只有当鼠标点击或者 hover 的时候，才设置其 animation-play-state: running ，这样就可以利用 hover 控制动画的行进！

基于上述两点，我们来实现一个有意思的打字动画，做到动画只触发单次，并且只有 hover 的时候动画会运行。

 
 
  
  <p>Hover Me - You are a pig!</p>

 
 
  
  p {
    position: relative;
    font-family: monospace;
    width: 26ch;
    animation: typing 3s steps(15, end);
    animation-fill-mode: both;
    animation-play-state: paused;
    overflow: hidden;
}
p:hover  {
    animation-play-state: running;
}
p::before {
    position: absolute;
    content: "";
    width: 4px;
    top: 0;
    bottom: 0;
    right: 0;
    animation: blink .8s linear infinite;
}
@keyframes blink {
    0%, 50% {
        border-right: 4px solid transparent;
    }
    50%, 100% {
        border-right: 4px solid #000;
    }
}
@keyframes typing {
    from {
        width: 11ch;
    }
    to {
        width: 26ch;
    }
}