使用定義動畫名字CSS創建漂亮的動畫效果是一種非常流行的技術，可以讓我們創建出具有吸引力和美觀的網站和應用程序。在本文中，我們將介紹如何使用定義動畫名字CSS來創建基本的動畫效果。

定義動畫名字CSS是一種CSS技術，它允許我們在CSS中定義動畫效果。通過使用定義動畫名字CSS，我們可以創建出各種不同類型的動畫，例如旋轉、縮放、移動等。

下面是一個簡單的例子，演示如何使用定義動畫名字CSS來創建一個簡單的旋轉動畫效果：

/* 定義旋轉角度和速度 */

.animation-name {

animation: rotate 2s infinite;

-webkit-animation: rotate 2s infinite;

/* 定義旋轉效果 */

@keyframes rotate {

0% {

transform: rotate(0deg);

100% {

transform: rotate(360deg);

@-webkit-keyframes rotate {

0% {

transform: rotate(0deg);

100% {

transform: rotate(360deg);

在上面的代碼中，我們定義了一個名為“rotate”的定義動畫名字CSS類。在這個類中，我們使用@keyframes和@-webkit-keyframes來定義動畫效果。我們定義了一個2秒鐘的無限循環動畫，其中旋轉角度為0度和360度。

接下來，我們使用CSS的@keyframes和@-webkit-keyframes規則來定義動畫效果。這些規則分別定義了在不同的瀏覽器中如何執行動畫效果。在這個例子中，我們使用了@keyframes規則來定義旋轉效果，而@-webkit-keyframes規則來定義在Safari瀏覽器中如何執行動畫效果。

通過使用定義動畫名字CSS，我們可以輕松地創建出各種不同類型的動畫效果，并且可以靈活地控制動畫的速度、旋轉角度和執行方式。這使得我們在CSS中創建動畫效果變得更加簡單和容易。