目录：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;}

实现平滑的动画成果。