CSS3文字動畫特效代碼

/*定義文字動畫的容器*/
.text-animation{
font-size: 36px;
color: #4CAF50;
animation: text-ani 4s linear infinite;
}
/*定義文字動畫*/
@keyframes text-ani{
0%{
opacity: 0;
transform: translateX(-50px);
}
50%{
opacity: 1;
}
100%{
opacity: 0;
transform: translateX(50px);
}
}

說明：

1. 定義了一個class為text-animation的容器，內部內容為要展示的文字。
2. 該容器的字體大小為36px，字色為綠色。
3. 對該容器應用了text-ani動畫，動畫執行時間為4秒（animation: text-ani 4s linear infinite;）。
4. text-ani是一個關鍵幀動畫，定義了從0%到100%不同時間點下文字的狀態。
5. 0%時，文字透明度為0，位置向左移動50像素；50%時，文字透明度為1；100%時，文字透明度為0，位置向右移動50像素。