在css3出现以前，想要在网页上实现动画特效几乎都是通过JavaScript或JavaScript的相关插件来实现，但css3出现后，利用css3的animation属性就可以实现很多我们想要的动画特效，而不必再依赖JavaScript。
“字节跳动”是一个在ppt幻灯片中很常用的特效，它可以很好的把我们的视觉注意力引到字节跳动的地方。今天就来跟大家一起分享：通过css3的animation属性来实现“字节跳动特效”。
我们先来看看效果图：
为了大家能更好的理解动画特效，先来介绍下animation的用法和一些相关属性
animation: letter 1s cubic-bezier(0.1,0.5,0.2,1) infinite alternate;
letter：动画名称，（可以简单理解为一组css样式的名称）；
1s：表示动画完成一次所花的时间；
cubic-bezier(0.1,0.5,0.2,1)：动画运动曲线，括号里的四个数字表示两个（x，y）坐标点，前两个数字是第一个坐标点，后两个数字是第二个坐标点；
infinite：表示无限循环，或者改成数字，表示想要循环运动的次数；
alternate：表示动画在奇数次播放时为正向播放，为偶数次播放时为反向播放，默认为始终正向播放；
如果只是如上的设置，结果是所有文字都是一起动的，因此还有个属性animation-delay：动画开始前端延迟时间，因为字节跳动是一个一个字的动，因此还需要给每个字都设置延迟时间。
属性介绍完了，下面上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
body{
background-color: #0099ff;
}
div{
text-align: center;
margin: 200px auto;
}
span{
position: relative;
text-align: center;
color: white;
font-size: 42px;
animation: letter 1s cubic-bezier(0.1,0.5,0.2,1) infinite alternate;
top: 0px;
}
span:nth-child(1){
animation-delay: 0s;
}
span:nth-child(2){
animation-delay: 0.1s;
}
span:nth-child(3){
animation-delay: 0.2s;
}
span:nth-child(4){
animation-delay: 0.3s;
}
span:nth-child(5){
animation-delay: 0.4s;
}
span:nth-child(6){
animation-delay: 0.5s;
}
span:nth-child(7){
animation-delay: 0.6s;
}
span:nth-child(8){
animation-delay: 0.7s;
}
span:nth-child(9){
animation-delay: 0.8s;
}
span:nth-child(10){
animation-delay: 0.9s;
}
/*
*letter对应animation中的letter
*from表示起始状态
*top表示结束状态
*/
@keyframes letter{
from{
top: 0px;
}
to{
top: 50px;
}
}
</style>
</head>
<body>
<div>
<span>欢</span>
<span>迎</span>
<span>来</span>
<span>到</span>
<span>心</span>
<span>月</span>
<span>I</span>
<span>T</span>
<span>博</span>
<span>客</span>
</div>
</body>
</html>animation-delay：延迟时间越短运动的越快，在实际使用中需自己把握。
