CSS3 動畫是網頁設計中非常重要的一個技術，它可以為網頁添加生動、有趣的效果。其中最經典的就是云朵動畫。讓我們來看看如何用 CSS3 來實現云朵動畫效果。

.cloud {
position: relative;
width: 60%;
height: 30px;
background: #fff;
box-shadow: 0 1px 1px rgba(0, 0, 0, .25), 
0 -1px 1px rgba(0, 0, 0, .2);
border-radius: 30px;
margin: 0 auto;
overflow: hidden;
}
.cloud::before,
.cloud::after {
content: "";
position: absolute;
background: #fff;
border-radius: 100%;
}
.cloud::before {
left: 10%; top: 50%;
width: 120px; height: 120px;
margin: -60px 0 0 -60px;
animation: cloud-left 4s infinite ease-in-out both;
}
.cloud::after {
right: 10%; top: 50%;
width: 80px; height: 80px;
margin: -40px 0 0 -40px;
animation: cloud-right 4s infinite ease-in-out both;
}
@keyframes cloud-left {
0%   { transform: translateX(-200%); opacity: 0; }
50%  { opacity: 1; }
100% { transform: translateX(200%); opacity: 0; }
}
@keyframes cloud-right {
0%   { transform: translateX(200%); opacity: 0; }
50%  { opacity: 1; }
100% { transform: translateX(-200%); opacity: 0; }
}

上面的代碼演示了一個云朵動畫的效果。首先我們創建了一個容器，即.cloud 類。云朵本身使用偽元素 before 和 after 添加到容器中去；使用 animation 屬性來實現動畫效果。

使用 CSS3 動畫可以為網頁設計帶來很多的樂趣和生動性，同時也提升了用戶體驗。我們可以一邊學習 CSS3，一邊嘗試實現更多的有趣動畫效果，從而建立起自己的動畫效果庫，以供日后使用。