今天有空把前幾天學的東西發一下，都是一些簡單的東西，但是千里之行始於足下，我雖然走的慢，但是未停下前進的腳步,
下來看下我做的“淡入的文字”最終動態效果：
上面這個動畫效果制作的過程是：
（1）先自定義一個透明度從0到1變化的動畫，然后在animation中調用這個動畫效果
（2）注意不同行文字出現的時間先后，這個通過animation中延時屬性可以實現
（3）規定文字最終動態為動畫的最終顯示狀態，否則文字顯示完會自動消失，這個用animation-fill-mode可以實現
一、先來看看HTML中程序：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>淡入的文字</title> <link type="text/css" rel="stylesheet" href="css/animate.css" /> </head> <body> <div class="fade-in-words"> <div class="first-words">山一程，水一程，</div> <div class="second-words">身向榆關那畔行，</div> <div class="third-words">夜深千帳燈。</div> <div class="four-words">風一更，雪一更，</div> <div class="five-words">聒碎鄉心夢不成，</div> <div class="six-words">故園無此聲。</div> </div> </body> </html>
上面這段程序主要是先把文字呈現出來，我隨便找了一首詩啦~~~~~大家不要去猜它的意思QAQ
二、看看CSS樣式（主要是CSS3）
.fade-in-words{
width: 200px;
margin: 0 auto;
text-align: center;
}
/*自定義一個透明度從0到1的動畫，它的名稱是fade-in*/
@keyframes fade-in{
0%{ opacity: 0;}
100%{opacity:1;}
}
@-webkit-keyframes fade-in{
0%{ opacity: 0;}
100%{opacity:1;}
}
@-ms-keyframes fade-in{
0%{ opacity: 0;}
100%{opacity:1;}
}
@-o-keyframes fade-in{
0%{ opacity: 0;}
100%{opacity:1;}
}
@-moz-keyframes fade-in{
0%{ opacity: 0;}
100%{opacity:1;}
}
.first-words{
opacity: 0; /*實先規定文字的狀態是不顯示的*/
animation: fade-in 4s ease 0s 1; /*調用名稱為fade-in的動畫，全程動畫顯示時間4S，進入方式為ease，延時0S進入，播放次數1次*/
-webkit-animation: fade-in 4s ease 0s 1;
-moz-animation: fade-in 4s ease 0s 1;
-o-animation: fade-in 4s ease 0s 1;
-ms-animation: fade-in 4s ease 0s 1;
/*規定動畫的最后狀態為結束狀態*/
animation-fill-mode:forwards;
-webkit-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
}
.second-words{
opacity: 0;
animation: fade-in 4s ease 2s 1;
-webkit-animation: fade-in 4s ease 2s 1;
-moz-animation: fade-in 4s ease 2s 1;
-o-animation: fade-in 4s ease 2s 1;
-ms-animation: fade-in 4s ease 2s 1;
/*規定動畫的最后狀態為結束狀態*/
animation-fill-mode:forwards;
-webkit-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
}
.third-words{
opacity: 0;
animation: fade-in 4s ease 4s 1;
-webkit-animation: fade-in 4s ease 4s 1;
-moz-animation: fade-in 4s ease 4s 1;
-o-animation: fade-in 4s ease 4s 1;
-ms-animation: fade-in 4s ease 4s 1;
/*規定動畫的最后狀態為結束狀態*/
animation-fill-mode:forwards;
-webkit-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
}
.four-words{
opacity: 0;
animation: fade-in 4s ease 6s 1;
-webkit-animation: fade-in 4s ease 6s 1;
-moz-animation: fade-in 4s ease 6s 1;
-o-animation: fade-in 4s ease 6s 1;
-ms-animation: fade-in 4s ease 6s 1;
/*規定動畫的最后狀態為結束狀態*/
animation-fill-mode:forwards;
-webkit-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
}
.five-words{
opacity: 0;
animation: fade-in 4s ease 8s 1;
-webkit-animation: fade-in 4s ease 8s 1;
-moz-animation: fade-in 4s ease 8s 1;
-o-animation: fade-in 4s ease 8s 1;
-ms-animation: fade-in 4s ease 8s 1;
/*規定動畫的最后狀態為結束狀態*/
animation-fill-mode:forwards;
-webkit-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
}
.six-words{
opacity: 0;
animation: fade-in 4s ease 10s 1;
-webkit-animation: fade-in 4s ease 10s 1;
-moz-animation: fade-in 4s ease 10s 1;
-o-animation: fade-in 4s ease 10s 1;
-ms-animation: fade-in 4s ease 10s 1;
/*規定動畫的最后狀態為結束狀態*/
animation-fill-mode:forwards;
-webkit-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
}
上面的程序我在注釋里面都寫得很清楚，感興趣的可以看我寫的注釋，我覺得比較簡單，沒有難度，但是需要注意瀏覽器前綴的添加，否則你懂得.