以一首骆宾王的《咏鹅》为例，制作一个css3动画文字效果，文字动画规则：从左向右缓慢进入，并且文字从透明再过渡到不透明，另外每段话完了后，有个时间间隔，也就是延时多少秒再开始动画。
第一步，先布局，设置一个width=540px，height=960px的div元素.box，并且居中显示。
<div class="box"><div class="sc"><h2>《咏鹅》</h2><span>唐 骆宾王</span><div class="jz"><p>鹅，鹅，鹅</p><p>曲项向天歌</p><p>白毛浮绿水</p><p>红掌拨清波</p></div></div></div>
标题和作者部分是固定的，css动画部分只应用在中间诗句当中，所以再单独写一个类名为jz的div盒子。
第二步，设置诗句的基本属性，字体大小，文字间隔，以及初始位置transform: translate(0)
.sc p {font-size: 28px;line-height: 50px;letter-spacing: .2em;transform: translate(0);}
第三步，添加css3动画animation
这里我应用了animation简写属性，简写的语法如下：
animation: example1 3s ease-out 1s backwards
第四步，使用@keyframes规则，创建动画
创建动画是通过逐步改变从一个CSS样式设定到另一个。指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同。0％是开头动画，100％是当动画完成。
第一个动画example1：
0% {transform:translate(-60px);opacity:0;}50% {transform:translate(-30px);opacity:.5;}100% {transform:translate(0);opacity:1;}
0%动画开始，从左偏移位置为-60px，透明度为0，逐渐过渡到50%的时候，左偏移位置在-30px，半透明，最后是100%动画结束，偏移位置为0，文字不透明。
第二个动画example2：
@keyframes example2 {0% {opacity:0;}40% {opacity:.8;}45% {opacity:.3;}50% {opacity:.8;}55% {opacity:.3;}60% {opacity:.8;}100% {opacity:1;}}
最后一个动画示例是有一个文字闪烁的效果，所以在动画40%-60%的时候，来回切换透明度。
完整的CSS代码如下：
.box{ width:540px; height:960px; margin:auto;background: url(bg.jpg) no-repeat;background-size: 540px;}.sc{ width:600px; height:600px; text-align:center; position:absolute; top:50%;left:50%; margin-top:-300px; margin-left:-300px}.sc h2{ font-size: 42px; margin:20px 0}.sc span{ color:#999; font-size: 20px; margin:20px 0; display:block}.sc p{ font-size: 28px; line-height: 50px; letter-spacing:.2em;transform: translate(0);}.sc p:nth-child(1){animation: example1 3s ease-out 1s backwards; }.sc p:nth-child(2){animation: example1 3s ease-out 4s backwards;}.sc p:nth-child(3){animation: example1 5s ease-in-out 7s backwards; }.sc p:nth-child(4){animation: example2 5s ease-in-out 11s backwards; }@keyframes example1 {0% {transform:translate(-60px);opacity:0;}50% {transform:translate(-30px);opacity:.5;}100% {transform:translate(0);opacity:1;}}@keyframes example2 {0% {opacity:0;}40% {opacity:.8;}45% {opacity:.3;}50% {opacity:.8;}55% {opacity:.3;}60% {opacity:.8;}100% {opacity:1;}}
原文地址：CSS3动画制作文字效果
