在網頁設計中，動畫效果是不可或缺的。CSS提供了多種實現動畫效果的方法。本文將介紹如何用CSS寫一個動畫，并演示如何控制該動畫的時間、速度和循環。

使用CSS編寫動畫，需要用到keyframes規則。該規則定義了一個動畫序列，該序列可以包含從某個初始狀態到某個最終狀態的中間狀態。以下是一個示例：

@keyframes example {
0%   {background-color:red;}
25%  {background-color:yellow;}
50%  {background-color:blue;}
100% {background-color:green;}
}

在上面的代碼中，我們定義了一個名為example的keyframes規則。該規則包含了四個狀態，分別是從紅色到黃色再到藍色最后到綠色。

有了keyframes規則，我們可以將其應用于元素上，實現動畫效果。以下代碼演示了如何將example動畫應用于一個div元素：

div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}

在上面的代碼中，我們將example動畫應用于一個div元素上。我們使用animation-name屬性指定動畫名稱，animation-duration屬性指定動畫持續時間，animation-timing-function屬性指定動畫速度曲線，animation-iteration-count屬性指定動畫循環次數。在這個例子中，動畫持續時間為4秒，速度曲線為ease-in-out，無限循環。

在實際應用中，我們可以通過修改上述屬性值，實現不同的動畫效果，并控制動畫的時間、速度和循環。例如，將animation-duration的值改為2s，動畫的持續時間就變成了2秒。

總之，CSS提供了多種實現動畫效果的方法。使用keyframes規則以及animation-name、animation-duration、animation-timing-function、animation-iteration-count等屬性，我們可以輕松實現各種動畫效果，并控制動畫的時間、速度和循環次數。