JavaScript動畫，是一類非常有趣的Web動畫。通過使用JavaScript編寫邏輯和動態屬性，它們可以在瀏覽器窗口中渲染出令人印象深刻的動態效果。 JavaScript動畫可以用于許多活動：網站的導航欄，圖片的輪播，按鈕的動畫等等。下面我們來看一下該如何使用JavaScript來實現幾個常見的動畫效果。 首先，我們介紹動畫效果之一： 盒子旋轉動畫。

p {
background-color: blue;
color: white;
width: 100px;
height: 100px;
margin: 20px auto;
animation: spin 2s infinite linear;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}

CSS3中的animation屬性可以輕松實現動畫效果。通過設置關鍵幀，我們可以定義動畫過程中所需的屬性和值。在上面的例子中，使用了@keyframes聲明為旋轉動畫定義兩個關鍵幀：from和to。from表示盒子的初始狀態，to表示盒子旋轉完畢的狀態。通過將animation屬性設置為2秒和無限次數的線性重復，就可以使盒子在瀏覽器窗口中一直旋轉。 接下來，我們來介紹一個有點復雜的動畫：改變圖片大小和位置。

p {
position: relative;
overflow: hidden;
width: 250px;
height: 250px;
margin: 50px auto;
}
img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
transition: all 0.5s ease-in-out;
}
p:hover img {
transform: scale(1.5);
}

在此例中，我們通過使用CSS3中的transform屬性，來對鼠標懸停在圖像上時所需的屬性進行定義。通過將鼠標置于圖像上方，我們實現了圖像變大的效果。 最后，我們來展示一個令人感到愉悅的動畫效果：漸變背景動畫。

p {
background-image: linear-gradient(to right, #5771c6, #c55698);
background-size: 200% auto;
position: relative;
animation: gradient 5s ease-in-out infinite;
}
@keyframes gradient {
0% {
background-position: 0 0;
}
100% {
background-position: 100% 0;
}
}

在本例中，我們使用了CSS3的gradient技術，將兩種顏色混合制成背景色。與之前的例子相比，這次使用的屬性將背景圖像放大至200%。通過使用animation屬性，并設置為5秒和無限次數的緩入和緩出重復，我們可以獲得一種非常有趣的背景漸變動畫。 JavaScript動畫的用途非常廣泛。上述例子只是Web動畫的一些簡單示例，我們可以將JavaScript動畫應用于瀏覽器窗口中的任何元素，例如圖片、文本或其他HTML元素。現在，使用這些技術，您可以輕松創建美觀、流動的Web體驗了！