在網頁設計中，CSS樣式動畫可以很好地增強用戶體驗，使網頁更加生動活潑。以下是一些CSS樣式動畫源代碼的示例：

/* 旋轉動畫 */
.rotate {
animation: rotate 2s linear infinite;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* 紅色閃爍動畫 */
.blink {
animation: blink 1s linear infinite;
}
@keyframes blink {
0% { background-color: red; }
50% { background-color: white; }
100% { background-color: red; }
}
/* 跳躍動畫 */
.jump {
animation: jump 1s ease-in-out infinite;
}
@keyframes jump {
0%, 50%, 100% { transform: translateY(0); }
25% { transform: translateY(-20px); }
75% { transform: translateY(-10px); }
}
/* 變形動畫 */
.shape {
animation: shape 2s ease-out infinite;
transform-origin: 50% 50%;
}
@keyframes shape {
0% { transform: scale(1); }
30% { transform: scale(1.2) skew(20deg); }
60% { transform: scale(0.8, 1.2) skew(-20deg); }
90% { transform: scale(1.2) skew(0deg); }
100% { transform: scale(1); }
}

以上動畫代碼可以通過添加class屬性來應用于元素，例如:

<div class="rotate"></div>
<div class="blink"></div>
<div class="jump"></div>
<div class="shape"></div>

值得注意的是，這些動畫使用了CSS3的animation屬性，需要在一些老舊瀏覽器上使用-vendor-prefixed前綴。除此之外，動畫的效果可以通過調整關鍵幀（@keyframes）屬性來改變。