CSS文字移動動畫是網頁設計中常用的一種動畫效果，它可以提升用戶體驗和吸引用戶的關注，下面讓我們來學習如何制作CSS文字移動動畫。

/* 首先我們需要設置文字樣式 */
p {
font-size: 20px;
font-weight: bold;
color: #333;
position: relative; /* 設置為相對定位 */
}
/* 然后我們來添加動畫效果 */
p::before {
content: ""; /* 偽元素 */
width: 100%; /* 寬度為100% */
height: 2px; /* 高度為2px */
display: block; /* 設置成塊狀元素 */
background-color: #333; /* 背景顏色為黑色 */
position: absolute; /* 設置為絕對定位 */
bottom: 0; /* 在底部位置 */
left: 0; /* 在左側位置 */
transform: scaleX(0); /* 初始時不可見 */
transform-origin: 0 0; /* 設置起始點 */
transition: transform 0.5s ease-in-out; /* 添加變形過渡效果 */
}
p:hover::before {
transform: scaleX(1); /* 當鼠標滑過時，將寬度變為100% */
}

以上便是CSS文字移動動畫的實現方式，我們可以通過修改樣式來達到不同的效果，讓網頁更加生動有趣。