CSS動畫是網頁設計中不可或缺的一部分，可以通過使用CSS動畫屬性來實現一個非常酷的效果。其中影格（keyframes）屬性是其中一個有用的工具。在下面的文章中，我們將學習如何使用CSS動畫屬性中的影格屬性來創造出驚人的效果。

@keyframes bounce {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-50px);
}
100% {
transform: translateY(0);
}
}

如以上代碼所示，我們首先需要使用@keyframes規則定義一個動畫。在這個動畫中，我們給它起了一個名字bounce，這個動畫包含了幾個不同的幀。

大家會發現，在我們定義@keyframes規則的時候，我們需要定義幾個“百分數”，這些百分數代表著動畫執行到了什么地方。例如，0%的時候就是動畫剛剛開始的時候，而100%就是動畫執行完畢的時候。我們可以根據自己的需要來定義這些百分數。

div {
animation: bounce 1s ease infinite;
}

一旦我們定義了@keyframes規則，我們就可以在CSS中應用它了。如以上代碼所示，我們可以將我們定義的bounce動畫應用到一個div元素上。在這個例子中，我們使用了動畫屬性，指定了動畫的名字以及動畫的持續時間、速度等信息。最后我們使用了infinite來使動畫一直持續下去。

總結來說，使用CSS動畫屬性中的@keyframes規則（影格）可以幫助我們創造出驚人的效果。只需要定義一些幀以及它們在動畫中的執行順序即可。同時我們還使用了動畫屬性來使我們定義的動畫實際發生作用。現在您可以擁有自己的CSS動畫效果了！