内容：1.弹跳动画2.闪烁效果3.打字动画4.平滑状态动画1.缓动效果问题描述：回弹效果意思是当一个transition到达终值时，往回退一点，然后又回到终值，如此往复一次或多次，逐渐收敛，最后稳定在终值。目前很多JS库都内置了回弹效果，但是如何用纯CSS实现呢？最基本的实现依赖于CSS动画，设置关键帧可以实现最简单的弹跳动画效果。@keyframes反弹{60%,80%,到{transform:translateY(350px);}70%{转换：translateY(250px);}90%{转换：translateY(300px);}}但是这产生了非常不同的效果确实如此，因为每次球改变方向时，速度都在不断加快，这是非常不自然的。这就涉及到动画默认的速度效果。它的速度曲线如下图所示：初始加速度很高，但是动画之后的加速度很平缓，这与弹跳相对均匀的速度曲线相矛盾。但是，我们可以通过设置动画的属性来改变这条曲线。通过设置animation-timing-function，我们可以得到完全不同的动画速度曲线。动画计时功能：缓出；可以明显看出弹跳效果更加逼真。2.闪烁效果问题描述：有一种常见的用户体验设计方法，就是用几次闪烁来表示用户界面发生了某些变化，或者突出显示当前链接的目标。因此，需要实现闪烁的动画效果。CSS动画确实可以实现各种类型的闪烁效果，比如闪烁整个元素（通过opacity属性），闪烁文本的颜色（通过color属性），闪烁边框（通过border-color属性），ETC。。在后面的内容中，我们只讨论文字的闪烁效果，因为这是最常见的需求。例如：我现在需要让一段文字实现闪烁效果@keyframesblink-smooth{to{color:transparent}}.highlight{animation:1sblink-smooth3;}这样基本可以实现，但是有一个问题，文字可以平滑的从原来的颜色淡化成透明色，但是又突然跳回原来的颜色，颜色的淡化和出现都有明显的加速效果，所以我们还需要做一些改进。这里的animation-direction属性用来控制动画是否要依次反向播放。动画：.5s闪烁平滑6交替；通过这个隐藏动画重复播放六次达到闪烁效果，也就是达到平滑的闪烁效果。3、打字动画问题描述：有时候，我们想让一段文字中的字符一个一个出现，模拟打字效果。如何用纯CSS实现这种效果？其实基本原理就是让盒子的宽度随着动画逐渐显示，设置盒子里的文字不换行隐藏超出盒子宽度的内容，从而实现文字的渐变显示，即打字动画。

CSS很棒

@keyframestyping{from{width:0;}}h1{宽度：8.1em；动画：打字8；空白：nowrap；overflow:hidden;}这样就可以实现如下基本效果：最后加上光标的效果@keyframescaret{50%{border-color:transparent;}}4.状态流畅的动画问题描述：通过动画响应用户动作，比如用户鼠标悬停在某个元素上，在这种场景下，我们将无法控制动画的实际循环次数，因为用户的动作随时都会打断动画，而这时候动画不能正好按照我们事先指定的循环次数插入。这时候动画只会硬生生的跳回初始状态，非常影响用户体验。我们需要让动画不要在用户交互结束时（比如：悬停）突然跳回动画初始页面，而是保持当前动画的进度，等待下一次交互继续动画。这里以全景图片展示动画为例。我们需要先显示裁剪后的图片的一部分，当鼠标悬停时，实现显示区域向右移动的动画效果。.panoramic{宽度：150px;高度：150px；背景:url("img/naxos-greece.jpg");背景大小：自动100%；}.panoramic:hover,.panoramic:focus{animation:panoramic10slinearinfinitealternate;}这个基本可以实现，但是存在上面描述的问题，结束后用户交互不流畅。我们需要的不是在交互的时候记住当前的动画状态，而是能够暂停当前的动画，等待下一次交互再次开始。通过animation-play-state:pause/running可以实现动画的暂停和恢复，所以修改代码。@keyframes全景{到{背景位置：100%0；}}.panoramic{宽度：150px；高度：150px；背景:url("img/naxos-greece.jpg");背景大小：自动100%；动画：全景10s线性无限交替；animation-play-state:paused;}.panoramic:hover,.panoramic:focus{animation-play-state:running;}用于流畅的动画。