CSS3動畫是一種非常有趣的技術，通過使用一些簡單的代碼就能賦予網頁元素生動的動畫效果。今天，我們要讓云彩動起來！

.cloud {
width: 100px;
height: 80px;
background-color: #fff;
border-radius: 50px;
position: relative;
overflow: hidden;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
.cloud:before,
.cloud:after {
content: "";
position: absolute;
background-color: #fff;
border-radius: 100%;
transition: transform linear 1s;
}
.cloud:before {
top: -30px;
left: 10px;
width: 60px;
height: 60px;
}
.cloud:after {
top: -50px;
right: 10px;
width: 80px;
height: 80px;
}
.cloud:hover:before {
transform: translateX(80px);
}
.cloud:hover:after {
transform: translateX(-80px);
}

首先，我們先定義一個云彩的樣式，其中使用了border-radius屬性實現了圓滑的邊角效果。我們把:before和:after用作云彩中的兩朵云。通過對它們的位置、大小和形狀進行定義，就可以實現兩朵大小不同、位置互相對稱的云彩。

接著，我們為兩朵云定義了一個transform屬性，并設置其過渡時間為1秒，也就是鼠標在其上停留的過渡時間。最后，我們為.cloud:hover:before和.cloud:hover:after定義了不同的translateX屬性，使它們在鼠標懸停時產生平移效果，從而形成云彩動起來的效果。

通過這些簡單的CSS3代碼，我們就成功地讓云彩動起來了。趕緊試試吧！