以一首骆宾王的《咏鹅》为例，制作一个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动画制作文字效果