一、缓动效果
学习和利用贝塞尔曲线，默认支持ease，ease-in，ease-out,ease-in-out和linear等
还提供一个cubic-beizer自定义贝塞尔曲线的起点和终点
Css中只支持一条贝塞尔曲的运动，不能连续多段
对cubic-beizer中控制锚点的水平坐标与垂直坐标互换，就可以得到任何调整函数的反向版本 cubic-beizer(.1,.25,1,.25)是ease的反向调整函数 水平坐标只能在0~1的范围内，因为水平坐标表示的是时间垂直坐标可以超过此范围，表示为运动距离
示例代码
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
@keyframes bounce{
60%, 80%, to{
transform: translateY(350px);
animation-timing-function: ease-out; /*加速*/
}
70%{ transform: translateY(250px); }
90%{ transform: translateY(300px) }
}
.ball{
display: inline-block;
animation: bounce 3s ease-in; /*减速*/
width: 20px;
height: 20px;
border-radius: 50%;
background: red;
}
@keyframes bounceEase{
60%, 80%, to{
transform: translateY(400px);
animation-timing-function: ease;
}
70% { transform: translateY(300); }
90% { transform: translateY(350px); }
}
.ball02{
display: inline-block;
animation: bounceEase 3s cubic-bezier(.1,.25,1,.25);/*反向ease*/
margin-left: 60px;
width: 20px;
height: 20px;
border-radius: 50%;
background: gray;
}
</style>
</head>
<body>
<div class="ball">
</div>
<div class="ball02"></div>
</body>
</div>
利用过渡(transition)实现
但需要注意transition-property默认值为all，所有可以过渡的属性都会被过滤
示例代码:
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
input:not(:focus) + .callout{
transform: scale(0);
transition-duration: .25s; /*覆盖默认的.5s时间*/
transition-property: transform; /*只过渡transform属性，不过滤背景等其他属性*/
}
.callout{
transition: .5s cubic-bezier(.25,.1,.3,1.5); /*光标输出input时，有动画*/
transition-property: transform;/*只过渡transform属性，不过滤背景等其他属性*/
}
input{
display: block;
}
.callout{
background: #fed;
position: absolute;
max-width: 14em;
padding: .6em, .8em;
}
</style>
</head>
<body>
<label>
Your name:
<input type="text" id="username" />
<span class="callout">Only letters,number,underscores and hyphens allowed</span>
</label>
</body>
</div>
二、逐帧动画
animation-timing-function中的steps函数，主要用他实现帧动画，他是一个阶跃函数，共两个参数 参数一：一个数字，代表时间函数中的间隔数量（必须为正数） timing-function是作用于每两个关键帧之间，而不是整个动画过程
参数二：接受start和end两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认end，step-start和step-end分别是steps(1,start)和steps(1,end)的简写
示例代码：
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
@keyframes loader{
to{ background-position: -128px 0; }
}
.wrap{
background: url("../img/frameAnimate.png") no-repeat;
width: 32px;
height: 50px;
background-position: 0px 0px;
animation: loader 1s infinite steps(4);
}
</style>
</head>
<body>
<div class="wrap"></div>
</body>
</div>
三、闪烁效果
实现两种闪烁效果，一是平滑闪烁，另一种是帧闪烁（更接近于现实）
平滑闪烁
主要是利用animation-iteration-count和animation-direction两个属性实现。
1.animation-iteration-count：表示动画的执行次数
2.animation-direction：表示动画是否应该轮流反向播放动画，如果值为alternate时，animation-iteration-count必须是一个偶数，因为是奇数正常播放，偶数反向播放
代码如下：
<style>
@keyframes blink-smooth{
to{ color: transparent; }
}
.wrap{
animation: 1s blink-smooth;
animation-iteration-count: 6;
animation-direction: alternate;
}
</style>
<div class="wrap">我是平滑的显示和隐藏三次</div>
</div>
帧闪烁
利用animation-timing-function属性的steps实现，因steps指定两个关键帧之间分成几个片段执行动画
1.animation-timing-function: steps(1)，然后配合上动画在50%实现一个透明即可
代码如下：
<style>
@keyframes blink-smooth02{
50% { color: transparent; }
}
.wrap02{
animation: 1s blink-smooth02;
animation-iteration-count: 3;
animation-timing-function: steps(1);
}
</style>
<div class="wrap">我是逐帧的显示和隐藏三次</div>
</div>
四、打字效果（只支持单行英文）
需要利用用下特性：
1.等宽字体，然后加上ch这个单位，ch是表示'0'这个字符的宽度.
2.使用动画让元素宽度从0变到最大宽度。
3.利用steps(1)让每个关键帧的地方产生动画 代码如下：
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
@keyframes typing {
from{ width: 0; }
}
@keyframes cart{
50%{ border-color: currentColor; } /*利用steps在关键帧位置发生动画实现*/
}
.wrap{
width: 14ch;
animation: typing 8s steps(14) , cart 1s steps(1) infinite;
white-space: nowrap;
overflow: hidden;
border-right:1px solid transparent;
font-family: Courier New, Courier, monospace;
}
</style>
</head>
<body>
<div class="wrap">Css is awesome</div>
</body>
</div>
五、状态平滑的动画
利用animation-play-state属性实现动画的暂停和播放功能，以及改变背景的定位。示例代码如下：
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
@keyframes mic{
to{ background-position: 100% 0; }
}
.wrap{
background: url("../img/cat.png");
background-repeat: no-repeat;
backgr