CSS動畫是Web開發中極為重要的一部分，可以通過實現豐富的動態效果來提高用戶體驗。其中，讓線條動起來是一種常見的應用，今天我們來介紹一下怎么讓線條動起來，并且延長的方法。

//CSS代碼
.line{
width: 50px;
height: 1px;
background-color: black;
animation: draw 2s linear forwards;
}
@keyframes draw{
0%{
width: 0;
}
100%{
width: 100%;
}
}

首先，我們需要創建一個線條元素，可以使用div或者其他元素實現。并且為線條定義一組動畫。在動畫中，我們可以使用@keyframes關鍵字來定義動畫的具體過程。

在上面的代碼中，我們為線條元素添加了一個50像素寬、1像素高的黑色背景，并且定義了一個名為draw的動畫。在這個動畫中，我們定義了兩個關鍵幀：0%和100%。在0%時，線條寬度為0，也就是初始狀態。在100%時，線條寬度為100%，也就是最終狀態。這樣，瀏覽器就會按照draw動畫的定義，在2秒鐘內讓線條從0逐漸延長到50像素的長度。

其中，animation屬性可以用來控制動畫的相關屬性，如動畫的名稱、持續時間、動畫的時間曲線等。通過將forwards屬性設置為true，可以讓動畫結束時定格在最后一幀，即將動畫的最終狀態設置為線條元素的狀態，這樣就可以讓線條保持延長狀態。

在實際應用時，可以根據具體的場景進行調整，如線條的顏色、寬度、動畫時間等。同時，也可以結合JavaScript來控制動畫的播放和暫停，實現更加豐富的交互效果。