CSS動畫是現代網頁設計的一部分，為網站和應用程序注入生機和活力。它們基于CSS3動畫模型，在網站和應用程序中使用鍵橋幀、變換和翻轉等效果。

/*創建一個方形div*/
div {
width: 100px;
height: 100px;
background-color: #f00;
}
/*創建CSS動畫*/
@keyframes animate-square {
0% {
transform: translateX(0px);
}
50% {
transform: translateX(100px);
background-color: #00f;
}
100% {
transform: translateX(200px);
background-color: #0f0;
}
}
/*應用動畫*/
div {
animation-name: animate-square;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}

上面的代碼創建了一個100 x 100像素的紅色方形div，并應用了一個名為“animate-square”的CSS動畫。該動畫基于“animate-square”的關鍵幀，其中0％和100％指定div移動到不同位置，50％更改了div的背景顏色和位置。

動畫使用animation-name、animation-duration、animation-timing-function和animation-iteration-count屬性定義。例如，animation-duration屬性定義動畫的持續時間，而animation-iteration-count定義動畫循環的次數。

這只是一個CSS動畫的例子，但該技術可以應用于許多不同的元素和效果，包括進度條、按鈕、標語、菜單和背景，以實現更加生動的網站和應用程序。