关于css:CSS揭秘过渡和动画实用技巧弹跳闪烁打字动画

6次阅读

共计 2230 个字符，预计需要花费 6 分钟才能阅读完成。

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

实现平滑的动画成果。

正文完