CSS是前端開發的重要一環，其豐富的樣式特效為網頁增色不少。其中折線動畫也是一種非常常見的特效之一，今天我們就來看看如何使用CSS制作一個折線動畫。

.line {
width: 400px;
height: 200px;
position: relative;
overflow: hidden;
}
.line:before {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-image: linear-gradient(to right, #ff6e7f, #bfe9ff);
transform-origin: left;
transform: scale(0, 1);
animation: lineAnim 2s linear 0s infinite forwards;
}
@keyframes lineAnim {
0% {
transform: scale(0, 1);
}
50% {
transform: scale(1, 1);
}
100% {
transform: scale(0, 1);
}
}

上述代碼中：

首先，我們需要創建一個容器.line來承載動畫，為了裁剪線條和實現定位等操作，我們把容器設置為相對定位并給它設置一個固定的高度和寬度，同時添加overflow: hidden。

接著，我們可以使用before偽類來制作線條。為偽類設置一個背景漸變的背景色，同時讓其寬高與父容器相等。并且通過transform-origin屬性設置變換的基點。

然后，通過transform屬性的scale()值來調整線條的起始狀態為“未展開”，添加使用@keyframes制作動畫的關鍵幀狀態。

完整實現：

<div class="line"></div>

通過上述代碼，在你的HTML頁面中插入這個容器元素，你就可以得到CSS折線動畫的效果啦！