CSS揭秘：过渡和动画实用技巧——弹跳、闪烁、打字动画

白衣黑月 - 2022-02-16 00:00:58

---

目录：
1、弹跳动画
2、闪烁效果
3、打字动画
4、状态平滑的动画

1、缓动效果

问题描述：回弹效果是指当一个过渡达到最终值时，往回倒一点，然后再次回到最终值，如此往复一次或多次，并逐渐收敛，最终稳定在最终值，目前有很多JS类库是内置回弹效果的，但是用纯CSS如何实现呢？

最基本的实现依靠的是CSS动画，并设置关键帧，就能实现最简单的弹跳动画效果。

@keyframes bounce {
      60%,
      80%,
      to {
        transform: translateY(350px);
      }
      70% {
        transform: translateY(250px);
      }
      90% {
        transform: translateY(300px);
      }
}

但是这样产生的效果非常不真实，因为每次小球改变方向的时候速度是持续加速的，很不自然，这涉及到动画的默认速度效果，它的速度曲线如下图所示：

初始加速度很高，动画后面的加速度反而平缓，这跟弹跳比较均匀的速度曲线有矛盾。不过我们可以通过设置animation的属性改变这种曲线，通过设置animation-timing-function能获得完全不同的动画速度曲线。

animation-timing-function: ease-out;
可以明显看出弹跳效果更加符合实际。

2、闪烁效果

问题描述：有一种常见的用户体验设计手法，就是通过数次闪烁来提示用户界面中有某处发生了变化，或者用来凸显出当前链接的目标。因而闪烁动画效果的实现是有必要的。

用 CSS 动画确实可以实现各种类型的闪烁效果，比如对整个元素进行闪烁（通过 opacity 属性），对文字的颜色进行闪烁（通过 color 属性），对边框进行闪烁（通过 border-color 属性）等等。在下面的内容中，我们将只讨论文字的闪烁效果，因为这是最常见的需求。

如：我现在需要让一段文字实现闪烁效果

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

这样就能基本实现了，但是有个问题，文字可以平滑的从原来的颜色淡化为透明色，但是后来却生硬地跳回原来的颜色，且颜色的淡去和显现有明显的加速效果，所以我们还要进行一定的改进。这里使用animation-direction属性控制是否应该轮流反向播放动画

animation: .5s blink-smooth 6 alternate;

通过这个使隐去的动画反复播放六次，实现闪烁效果，这样就是实现平滑的闪烁效果了。

3、打字动画

问题描述：有些时候，我们希望一段文本中的字符逐个显现，模拟出一种打字的效果。这种效果用纯CSS的方式如何实现呢

其实基本的原理就是让盒子的宽度用动画逐步展现，对盒子内的文字设置不换行且隐藏超出盒子宽度的内容，从而实现文字的逐步展现，也就是打字动画。

<h1>CSS is awesome</h1>

@keyframes typing {
      from {
        width: 0;
      }
}

h1 {
      width: 8.1em;
      animation: typing 8s;
      white-space: nowrap;
      overflow: hidden;
}

这样就能实现下面的基本效果：

最后，加上光标的效果

@keyframes caret {
      50% {
        border-color: transparent;
      }
}

4、状态平滑的动画

问题描述：通过动画来响应用户的动作，比如用户的鼠标悬停在某个元素上，在这种场景下，我们将无法控制动画实际的循环次数，因为用户的动作会随时中断动画，而此时动画不可能刚好插放到我们事先指定的循环次数。这个时候动画只会生硬的跳回初始的状态，这非常影响用户的体验。

我们需要让动画在用户交互动作（如：hover）结束时，不是生硬的跳回动画的初始页面，而是保留当前动画的进度，等待下次交互的时候继续动画，这里以一张全景图片的展示动画为例。

我们需要先展示图片部分裁剪，当鼠标悬停时候，实现展示区域向右移动的动画效果。

.panoramic {
    width: 150px; height: 150px;
    background: url("img/naxos-greece.jpg");
    background-size: auto 100%; }
.panoramic:hover, .panoramic:focus {
    animation: panoramic 10s linear infinite alternate;
}

这样能基本实现，但是存在上面描述的问题，用户交互结束后的不平滑。我们需要的不是交互时候记住当前动画状态，而是能暂停当前动画，等下次交互时再开始。

通过animation-play-state：pause/running 就能实现动画的暂停和恢复，于是修改代码。

@keyframes panoramic {
    to { background-position: 100% 0; }
}
.panoramic {
    width: 150px; height: 150px;
    background: url("img/naxos-greece.jpg");
    background-size: auto 100%;
    animation: panoramic 10s linear infinite alternate;
    animation-play-state: paused;
}
.panoramic:hover, .panoramic:focus {
    animation-play-state: running;
}

实现平滑的动画效果。

Tags 标签

csshtmlhtml5css3前端

扩展阅读