缓动效果
回弹动画效果是比较常见的动画，比如小球的运动、对于尺寸变化和角度变化使用回弹效果可以增强动画的体验。小面介绍一些简单的缓动效果的动画。
弹跳动画的实现
css中所有过渡和动画都是跟一条曲线（缓动曲线）有关的，这条曲线指定了动画过程在整段时间中是如何推进的。
在animationtiming-function/transition-timing-function 展开式属性中，都可以把这个默认的调速函数显式指定为ease 关键字。ease也是默认值，四种指定的缓动曲线值分别是ease、ease-in、ease-out(是ease-in 是反向版本)、ease-in-out、linear，四种的缓动曲线分别如下图所示：
使用ease-in和ease-out这对相反的版本可以实现回弹的效果
如小球的回弹效果可以这样实现：
@keyframes bounce {
60%, 80%, to {
transform: translateY(400px);
animation-timing-function: ease;
}
70% {
transform: translateY(300px);
}
90% {
transform: translateY(360px);
}
}
.ball {
width: 50px;
height: 50px;
border-radius: 50px;
background: yellow;
animation: bounce 3s ease-in;
}CSS 的调速函数都是只有一个片断的贝塞尔曲线，因此每个调速函数只有两个控制锚点。同时CSS 提供了一个cubic-bezier(x1, y1, x2, y2)函数，允许我们指定自定义的调速函数。它接受四个参数，分别代表两个控制锚点的坐标值，如果想得到任何调速函数的反向版本，只要把控制锚点的水平坐标和垂直坐标互换就可以。
把上面的ball的animation，设置成 bounce 3s cubic-bezier(.1,.25,1,.25);会使回弹效果更真实。
弹性过渡
弹性过渡的应用场景比如说是一个input框，用户输入的时候给予一个提示框，可以应用上面的cubic-bezier实现
<label>
Your username: <input id="username" />
<span class="callout1">
Only letters, numbers,
underscores (_) and hyphens (-) allowed!
</span>
</label>input:not(:focus) + .callout1 {
transform: scale(0);
transition: .25s;
}
.callout1 {
/* cubic-bezier(.5s * 50%, .1, .5 * 60%, 1.5) */
transition: .5s cubic-bezier(.25, .1, .3, 1.5);
transform-origin: 1.4em -.4em;
/* CSS transform 属性 , 只对 block 级元素生效*/
display: block;
width: 250px;
height: 40px;
font-size: 12px;
border: 1px solid #eee;
margin-top: 5px;
}
实现效果
在使用transition进行过渡时，在不指定transition-property属性时，它会自动读取它的初始值all，这时所有能做过渡的属性都会参与过渡，比如color。所以在设置过渡时，要把过渡的作用范围限制在某几种特定的属性上。
综上，上面的代码transition的值都应该加上transform，即
input:not(:focus) + .callout {
transform: scale(0);
transition: .25s transform;
}
.callout {
transform-origin: 1.4em -.4em;
transition: .5s cubic-bezier(.25,.1,.3,1.5) transform;
}逐帧动画
在实现一个卡通影片或者一个复杂的进度指示框，或者loading的标志时这种场景比较适应逐帧动画。
在实现loading动画时也是可以使用gif动画的，但是gif动画是有一些自己的缺点的：
GIF 图片的所能使用的颜色数量被限制在 256 色
GIF 不具备 Alpha 透明的特性。
修改动画的参数不方便，需要重新编辑生成。
在css中可以使用step这个函数实现。
所有基于贝塞尔曲线的调速函数都会在关键帧之间进行插值运算，从而产生平滑的过渡效果。这种平滑特性不适用于逐帧动画的实现。
steps() 会根据你指定的步进数量，把整个动画切分为多帧，而且整个动画会在帧与帧之间硬切，不会做任何插值处理。这种loading的实现正适用于这种
具体实现如下：
<div class="loader">Loading...</div>@keyframes loader {
to { background-position: -800px 0; }
}
.loader {
width: 100px;
height: 100px;
background: url(img/loader.png) 0 0;
animation: loader 1s infinite steps(8);
/* 把文本隐藏起来 */
text-indent: 200%;
white-space: nowrap;
overflow: hidden;
}loader.png 是一个将所有 loading 状态拼接好的 png 图片
闪烁效果的实现
以前的blink标签可以用来实现文字的闪烁效果，现在没有了，现在可以通过animation创建的动画实现
@keyframes blink {
50% {
color: transparent
}
}
.highlight {
animation: 1s blink 3 steps(1);
}打字动画的实现
实现思路就是让容器的宽度成为动画的主体，把所有文本包裹在这个容器中，然后让它的宽度从0 开始以步进动画的方式、一个字一个字地扩张到它应有的宽度。只适用于单行的文本
实现中将使用ch这个单位，它表示0字符的宽度，很少用到，但对于等宽字体来说，“0”字符的宽度和其他所有字形的宽度是一样的。假设我们要实现的文本是等宽字体。
<h1 class="code">CSS is awesome!</h1>@keyframes typing {
from {
width: 0
}
}
/* 闪烁的光标的实现 */
@keyframes caret {
50% {
/* currentColor使边框颜色自动与文字颜色保持一致 */
border-color: currentColor;
}
}
.code {
width: 15ch; /* 文本的宽度 */
animation: typing 6s steps(15),
caret 1s steps(1) infinite;
white-space: nowrap;
border-right: .05em solid transparent;
overflow: hidden;
}效果：
状态平滑的动画
应用场景是在一张图片很长，展示的位置又很有限，这时候做成动画是再好不过的，在鼠标hover或者focus的触发动画的发生。但是当动画开始播放还没结束的时候，鼠标离开时，动画就会特别生硬的回到图片的最开始的位置上，解决的办法就是使用animation-play-state这个属性
@keyframes panoramic {
to {
background-position: 100% 0;
}
}
.panoramic {
width: 150px;
height: 150px;
background: url("timg.jpeg");
background-size: auto 100%;
animation: panoramic 10s linear infinite alternate;
animation-play-state: paused;
}
.panoramic:hover, .panoramic:focus {
animation-play-state: running;
}效果：
沿环形路径平移的动画
通过设置旋转的动画达到效果，但是会存在一个问题旋转的时候图片自身也会一起旋转，解决这个问题有两种方法：
（1）需要两个元素的解决方案
思路就是给元素设置另一个旋转动画，让它以相反的方向自转一周，这样旋转的时候图片自身就不会跟着旋转
<div class="path">
<div class="avatar">
<img src="lea.jpg" />
</div>
</div>@keyframes spin {
to {
transform: rotate(1turn);
}
}
.path .avatar {
animation: spin 10s infinite linear;
transform-origin: 50% 150px; /* 150px = 路径的半径 */
}
.path .avatar > img {
width: 50px;
height: 50px;
border-radius: 25px;
position: absolute;
left: 120px;
top: 10px;
animation: inherit;
/* reverse 得到原始动画的反向版本 */
animation-direction: reverse;
}效果如下：
(2) 单个元素的解决方案
每个transform-origin 都是可以被两个translate() 模拟出来的。
例如
transform: rotate(30deg);
transform-origin: 200px 300px;
transform: translate(200px, 300px)
rotate(30deg)
translate(-200px, -300px);
transform-origin: 0 0;
/* 以上两段代码等价 */应用translate变形函数并不是彼此独立的，每个变形函数并不是只对这个元素进行变形，而且会把整个元素的坐标系统进行变形，从而影响所有后续的变形操作。这也说明了为什么变形函数的顺序是很重要的，变形属性中不同函数的顺序如果被打乱，可能会产生完全不同的结果。
通过translate的方式就可以只用一层dom
@keyframes spin {
from {
transform: rotate(0turn) translateY(-150px) translateY(50%) rotate(1turn);
}
to {
transform: rotate(1turn) translateY(-150px) translateY(50%) rotate(0turn);
}
}
.avatar {
animation: spin 3s infinite linear;
}