CSS是網頁設計的重要組成部分，通過CSS我們可以實現很多酷炫的效果。復制動畫是網頁設計中常用的技術之一，下面就來分享一下如何復制CSS動畫。

/* 在CSS中復制動畫有兩種方法： */
/* 第一種方法：使用@keyframes關鍵字 */
@keyframes slidein { 
from {margin-left: -100%;}
to {margin-left: 0%;}
}
#example1 {
width: 200px;
height: 200px;
background-color: red;
animation-name: slidein;
animation-duration: 3s;
}
/* 第二種方法：使用已有的CSS類 */
#example2 {
width: 200px;
height: 200px;
background-color: blue;
}
.slidein {
animation-name: slidein;
animation-duration: 3s;
}
<div id="example1"></div>
<div id="example2" class="slidein"></div>

在上面的代碼中，我們定義了一個名稱為slidein的動畫，從左邊移動到中心。然后我們使用了兩種方法將動畫應用到兩個不同的div中。第一個div（id為example1）使用了animation-name和animation-duration屬性，將動畫名稱和時間應用到了div中，實現了一個從左邊移動到中心的動畫效果。而第二個div（id為example2）使用了class屬性，將名稱為slidein的動畫應用到了div中，也實現了同樣的動畫效果。

通過這兩種方法，我們可以在CSS中復制動畫，讓網頁更加動態和生動。掌握這兩種方法，相信網頁設計效果會更加令人滿意。