這是一部關于CSS3動畫的短視頻劇本。

場景1：一個方格不停地跳動

.box {
width: 100px;
height: 100px;
background-color: red;
animation: jump 0.5s infinite alternate;
}
@keyframes jump {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-20px);
}
}

場景2：一個心形逐漸變大變小

.heart {
width: 50px;
height: 50px;
font-size: 50px;
color: red;
animation: bounce 1s infinite;
}
@keyframes bounce {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}

場景3：幾個圓形交替變換顏色

.circle1, .circle2, .circle3 {
width: 50px;
height: 50px;
border-radius: 50%;
animation: changeColor 3s infinite;
}
.circle1 {
background-color: red;
animation-delay: 0s;
}
.circle2 {
background-color: green;
animation-delay: 1s;
}
.circle3 {
background-color: blue;
animation-delay: 2s;
}
@keyframes changeColor {
0% {
background-color: red;
}
33% {
background-color: green;
}
66% {
background-color: blue;
}
100% {
background-color: red;
}
}

場景4：一個圖片在不斷旋轉

img {
width: 100px;
height: 100px;
animation: rotate 1s linear infinite;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

通過這些場景，我們可以看到CSS3動畫的強大和靈活性，讓網頁更加生動和有趣。