在CSS3動畫中，我們有時候會發現動畫執行了兩次，這是因為CSS3動畫默認會執行一遍正向動畫和一遍反向動畫，下面我們來看看具體原因。

.example {
animation: myanimation 2s;
animation-direction: alternate;
}
@keyframes myanimation {
from {transform: translateX(0);}
to {transform: translateX(100px);}
}

如上所示，我們定義了一個名為"myanimation"的動畫，它將元素從左至右移動100個像素。在被應用到".example"類的元素中，我們設置了動畫執行時間為2秒，并將動畫方向設置為"alternate"，這表示動畫在正向執行完后會反向執行。

由于我們設置了動畫方向為"alternate"，因此，當動畫正向執行時，元素從左至右移動100個像素，而在反向執行時，元素則從右至左移動100個像素，回到原來的位置。這個反向執行的過程會被認為是動畫的第二次執行，從而導致整個動畫一共執行了兩次。

如果我們不想讓動畫執行兩次，我們可以通過設置"animation-iteration-count"為"1"來使動畫只執行一次：

.example {
animation: myanimation 2s;
animation-direction: alternate;
animation-iteration-count: 1;
}

或者，我們也可以通過設置"animation-direction"為"normal"或"reverse"，來讓動畫只執行正向或反向動畫：

.example {
animation: myanimation 2s;
animation-direction: normal; /*只執行正向動畫*/
}
.example2 {
animation: myanimation 2s;
animation-direction: reverse; /*只執行反向動畫*/
}

總之，要避免動畫執行兩次，我們可以通過設置"animation-iteration-count"或"animation-direction"來達到目標。