設頁面中有<div class=”shape”></div>，若定義.shape的樣式規則為：
.shape
{
position: absolute;
left:125px;
top:75px;
width: 150px;
height: 150px;
border-radius:10% 50% 10% 50%;
border:2px solid #f00;
background-color: #ff0;
}
可在頁面中顯示如圖1所示的圖形。
圖1 動畫基本圖形
以這個圖形作為參與動畫的對象，為其定義關鍵幀anim，並設置animation屬性，使之產生動畫效果。
例如，定義如下的關鍵幀anim
@keyframes anim
{
0%,15% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}
可在頁面中呈現如圖2所示的動畫，圖形旋轉起來了。
圖2 圖形旋轉效果
編寫的HTML文件內容如下。
<!DOCTYPE html>
<html>
<title>圖形的動畫效果</title>
<head>
<style>
.container
{
position: relative;
margin: 50px auto;
width: 400px;
height:300px;
background:#d8d8d8;
overflow:hidden;
border: 4px solid rgba(255, 0, 0, 0.9);
border-radius: 10%;
}
.shape
{
position: absolute;
left:125px;
top:75px;
width: 150px;
height: 150px;
border-radius:10% 50% 10% 50%;
border:2px solid #f00;
background-color: #ff0;
animation:anim 5s linear infinite;
}
@keyframes anim
{
0% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="container">
<div class="shape"></div>
</div>
</body>
</html>
1．閃爍
閃爍動畫效果的設置主要利用opacity屬性為參與動畫的對象設置一個透明度級別。其基本格式為：opacity: value;
其中，屬性值value指定不透明度。從0.0（完全透明）到1.0（完全不透明）。
若修改關鍵幀anim如下：
@keyframes anim
{
0%,50%,100% {opacity:1;}
25%,75% {opacity:0;}
}
則在頁面中呈現如圖3所示的閃爍動畫效果。
圖3 閃爍
2．淡入淡出
利用opacity屬性還可以實現淡入淡出的動畫效果。
若修改關鍵幀anim如下：
@keyframes anim
{
0% { opacity:1; transform:translateY(0); }
100% { opacity:0; transform:translateY(-225px); }
}
則在頁面中呈現如圖4所示的向上淡出動畫效果。
圖4 向上淡出
若修改關鍵幀anim如下：
@keyframes anim
{
0% { opacity:0; transform:translateX(-275px); }
100% { opacity:1; transform:translateX(0); }
}
則在頁面中呈現如圖5所示的從左淡入動畫效果。
圖5 從左淡入
仿照上面的例子，大家可以試試向下淡出、向左淡出、向右淡出、從上淡入、從下淡入、從右淡入等動畫效果的設置。甚至可以設置從四個角向中心的淡入、從中心向四個角淡出的動畫效果。
3．飛入
利用變換屬性transform:translate();讓對象的位置進行變化，可以實現飛入動畫效果。
若修改關鍵幀anim如下：
@keyframes anim
{
0% { transform:translate(-275px,-225px); }
100% { transform:translate(0,0); }
}
則在頁面中呈現如圖6所示的從左上角飛入動畫效果。
圖6 從左上角飛入
4．縮放
縮放主要是利用變換屬性transform:scale(n)進行設置。
若修改關鍵幀anim如下：
@keyframes anim
{
0%,100% { transform:scale(1);}
50% { transform:scale(1.8);}
}
則在頁面中呈現如圖7所示的放大與縮小動畫效果。
圖7 放大與縮小
5．翻轉
利用屬性transform: rotateX(n);或transform: rotateY(n);可以實現翻轉動畫效果。
若修改關鍵幀anim如下：
@keyframes anim
{
0% {transform:perspective(400px) rotateY(0);}
100% {transform:perspective(400px) rotateY(360deg);}
}
則在頁面中呈現如圖8所示的水平（左右）翻轉動畫效果。
圖8 水平翻轉
若修改關鍵幀anim如下：
@keyframes anim
{
0% {transform:perspective(400px) rotateX(0);}
100% {transform:perspective(400px) rotateX(360deg);}
}
則在頁面中呈現如圖9所示的垂直（上下）翻轉動畫效果。
圖9 垂直翻轉
若修改關鍵幀anim如下：
@keyframes anim
{
0% { transform:perspective(400px) rotateY(0);}
40% { transform:perspective(400px) rotateY(170deg) scale(1.5);}
50% { transform:perspective(400px) rotateY(190deg) scale(1.5);}
80% { transform:perspective(400px) rotateY(360deg) scale(1);}
100% {transform:perspective(400px) scale(1);}
}
則在頁面中呈現如圖10所示的縮放翻轉動畫效果。
圖10 縮放式翻轉
6．搖擺
讓對象在一個較小范圍內進行旋轉，可以實現搖擺的動畫效果。
若修改關鍵幀anim如下：
@keyframes anim
{
20% { transform:rotate(15deg); }
40% { transform:rotate(-15deg); }
60% { transform:rotate(8deg);}
80% { transform:rotate(-8deg); }
100% { transform:rotate(0); }
}
則在頁面中呈現如圖11所示的搖擺動畫效果。
圖11 搖擺
若在搖擺過程同時讓對象左右適當平移，修改關鍵幀anim如下：
@keyframes anim
{
0%,100% { transform:translateX(0);}
15% { transform:translateX(-100px) rotate(-5deg);}
30% { transform:translateX(80px) rotate(5deg);}
45% { transform:translateX(-65px) rotate(-3deg);}
60% { transform:translateX(40px) rotate(3deg);}
75% { transform:translateX(-20px) rotate(-1deg);}
}
則在頁面中呈現如圖12所示的左右搖擺動畫效果。
圖12 左右搖擺
若在搖擺過程同時讓對象進行適當縮放，修改關鍵幀anim如下：
@keyframes anim
{
0%,100% { transform:scale(1) rotate(0);}
10%,20% { transform:scale(0.9) rotate(-8deg);}
30%,50%,70%,90% { transform:scale(1.1) rotate(8deg);}
40%,60%,80% { transform:scale(1.1) rotate(-8deg);}
}
則在頁面中呈現如圖13所示的晃動動畫效果，它也像在振鈴。
圖13 晃動
7．往復運動
若修改關鍵幀anim如下：
@keyframes anim
{
0%,100% { transform:translateX(0); }
10%,30%,50%,70%,90% { transform:translateX(-15px); }
20%,40%,60%,80% { transform:translateX(15px); }
}
則在頁面中呈現如圖14所示的左右往復運動動畫效果。
圖14 左右往復運動
若修改關鍵幀anim如下：
@keyframes anim
{
0%,20%,50%,80%,100% { transform:translateY(0);}
40% { transform:translateY(-50px); }
60% { transform:translateY(50px); }
}
則在頁面中呈現如圖15所示的上下彈跳動畫效果。
圖15 上下彈跳
若修改關鍵幀anim如下：
@keyframes anim
{
0%,100% { transform:translate(-20px,-20px); }
25% { transform:translate(-20px,20px); }
50% { transform:translate(20px,20px); }
80% { transform:translate(20px,-20px); }
}
則在頁面中呈現如圖16所示的四周循環往復動畫效果。
圖16 四周循環往復運動
8．旋入
若修改關鍵幀anim如下：
@keyframes anim
{
0% { transform-origin:left bottom;transform:rotate(-180deg); opacity:0; }
100% { transform-origin:left bottom;transform:rotate(0); opacity:1;}
}
則在頁面中呈現如圖17所示的從左下角旋入動畫效果。
圖17 從左下角旋入