CSS3擁有許多引人注目的動畫功能，以下是30個流行的動畫效果：

1 transform：旋轉
transform:rotate(30deg);
2 transform：扭曲
transform:skew(20deg,10deg);
3 transform：縮放
transform:scale(1.3);
4 transform:移動
transform:translate(100px,200px);
5 transform：3D旋轉
transform:rotateX(30deg) rotateY(30deg);
6 transition：漸變動畫
transition:all 2s;
7 transition：透明度變化
transition:opacity 1s;
8 transition：背景顏色變化
transition:background-color 0.5s;
9 transition：縮放動畫
transition:transform 1s;
10 transform-origin：變換原點
transform-origin:center;
11 perspective：透視效果
perspective:1000px;
12 perspective-origin：透視中心點
perspective-origin:center;
13 backface-visibility：是否顯示背面
backface-visibility:hidden;
14 animation：設置動畫
animation:rotate 2s;
15 animation：設定時間
animation-duration:1s;
16 animation：設定循環
animation-iteration-count:infinite;
17 animation：漸進間隔
animation-timing-function:linear;
18 animation：設定延遲
animation-delay:0.5s;
19 animation：設定方向
animation-direction:alternate;
20 animation-fill-mode：定義動畫完成后的狀態 
animation-fill-mode:forwards;
21 animation-play-state：動畫當前狀態
animation-play-state:paused;
22 @keyframes：定義動畫
@keyframes slidein{
from {transform:translateX(-100%);}
to {transform:translateX(0);}
}
23 border-radius：設置邊框
border-radius:50%;
24 overflow：超出部分是否隱藏
overflow:hidden;
25 box-shadow：陰影
box-shadow:10px 10px 5px #888888;
26 text-shadow：文本陰影
text-shadow:2px 2px #000000;
27 linear-gradient：漸變背景
background: linear-gradient(red,yellow);
28 radial-gradient：徑向漸變
background: radial-gradient(red,yellow);
29 box-sizing：盒模型類型
box-sizing:border-box;
30 flexbox：彈性盒子布局
display:flex;