CSS3動畫是網頁設計中必不可少的一部分，其中一種比較常見的動畫效果就是線條變長，通過CSS代碼的控制，可以讓網頁呈現出非常炫酷的視覺效果。

/* CSS3代碼實現線變長動畫 */
.line {
width: 0; /* 初始長度為0 */
height: 2px; /* 線的高度 */
background-color: #000; /* 線的顏色 */
animation-name: stretchLine; /* 指定動畫名稱 */
animation-duration: 2s; /* 指定動畫持續時間為2秒 */
animation-timing-function: ease-in-out; /* 指定動畫速度曲線為緩進緩出 */
animation-fill-mode: forwards; /* 指定動畫結束后保持最后一幀 */
}
@keyframes stretchLine {
0% {
width: 0; /* 初始長度為0 */
}
100% {
width: 100%; /* 最終長度為100% */
}
}

以上代碼中，首先定義了一個名為“line”的CSS類，其中初始寬度為0，高度為2像素，背景色為黑色。接著通過“animation-name”屬性指定了一個名為“stretchLine”的動畫，在動畫中通過“keyframes”關鍵字定義了動畫的兩幀，分別是初始狀態和終止狀態。其中，初始狀態為寬度為0，終止狀態為寬度為100%。最后通過“animation-duration”屬性指定了動畫的持續時間為2秒，這樣就實現了線條變長的動畫效果。