CSS 線性動畫是一種可以讓頁面元素變得更加生動、具有交互性的技術。下面我們來看一些常見的線性動畫。

/* 滑動動畫 */
.slide {
transition: transform 0.5s ease-in-out; /* 設置動畫時間和速度 */
}
.slide:hover {
transform: translateX(20px); /* 鼠標懸停時元素向右移動20像素 */
}
/* 漸變動畫 */
.fade {
transition: opacity 0.5s ease-in-out; /* 設置動畫時間和速度 */
}
.fade:hover {
opacity: 0.5; /* 鼠標懸停時元素透明度減半 */
}
/* 旋轉動畫 */
.rotate {
transition: transform 0.5s ease-in-out; /* 設置動畫時間和速度 */
}
.rotate:hover {
transform: rotate(360deg); /* 鼠標懸停時元素旋轉360度 */
}

以上代碼分別實現了滑動、漸變、旋轉等效果。其中，transition屬性用于設置動畫時間和速度，可以分別設置案例中的屬性，并用ease-in-out來實現緩進緩出的效果。另外，hover偽類可以實現鼠標懸停時的動畫效果。

除了以上簡單的動畫效果外，CSS 線性動畫可以實現任意復雜度的動畫效果，只需要利用樣式的計算能力和過渡屬性，通過前端開發工具、設計工具等工具來輔助實現，豐富頁面的交互性和視覺體驗。