css實現文字淡入淡出

.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;
}