在網頁設計中，我們經常需要一些令人眼前一亮的效果來吸引用戶的眼球。一種非常流行的效果就是文字移動淡出。透過css的魔法，我們可以輕易實現這種效果。
/*樣式代碼*/
.move-fade {
animation: move-fade 2s linear forwards;
opacity: 0;
position: relative;
left: 100px;
}
@keyframes move-fade {
0% {
opacity: 0;
left: 100px;
}
25% {
opacity: 1;
left: 50px;
}
75% {
opacity: 1;
left: 200px;
}
100% {
opacity: 0;
left: 200px;
}
}這里我們定義一個類名為“move-fade”的樣式，然后用CSS3的animation屬性定義了關鍵幀動畫“move-fade”，并給元素設置了一個初始值，位置是相對于文檔左側100個像素。
在動畫中我們設定了四個關鍵幀（0%、25%、75%、100%），每個關鍵幀的位置和透明度都有更改，這樣就可以讓文字看起來淡出，并在移動的過程中增加生動感。
最后一步是將這個類名加入到想要使用它的元素上：
<p class="move-fade">這里的文字將會在頁面上移動淡出.</p>
完整的示例代碼：
<!DOCTYPE html>
<html>
<head>
<title>CSS Text Move-Fade Effect</title>
<style>
.move-fade {
animation: move-fade 2s linear forwards;
opacity: 0;
position: relative;
left: 100px;
}
@keyframes move-fade {
0% {
opacity: 0;
left: 100px;
}
25% {
opacity: 1;
left: 50px;
}
75% {
opacity: 1;
left: 200px;
}
100% {
opacity: 0;
left: 200px;
}
}
</style>
</head>
<body>
<p class="move-fade">這里的文字將會在頁面上移動淡出.</p>
</body>
</html>如此一來，頁面上的文字就會在精彩的效果中逐漸消失。