CSS3動畫是一種通過設置CSS屬性來控制頁面元素的運動效果的技術。通過使用CSS3中的動畫屬性，我們可以創建逼真的動畫效果，從下往上描述。

在HTML中，我們可以創建一個包含多個元素的文檔，每個元素都可以包含一個CSS類，用于定義元素的外觀和行為。我們可以使用CSS3中的動畫屬性來控制元素的移動、旋轉、縮放等效果。

下面是一個使用CSS3動畫控制文本輸入框的移動效果的示例：

input[type="text"], select {

width: 300px;

height: 200px;

padding: 10px;

border: 1px solid #ccc;

border-radius: 5px;

input[type="text"]:hover {

background-color: #f2f2f2;

input[type="text"]::-webkit-input-placeholder {

color: #999;

font-size: 16px;

input[type="text"]::-moz-placeholder {

color: #999;

font-size: 16px;

input[type="text"]:focus {

background-color: #ddd;

color: #fff;

border-radius: 5px;

padding: 10px;

在這個示例中，我們創建了一個文本輸入框，并使用CSS3中的動畫屬性來控制輸入框的移動效果。當用戶懸停輸入框時，我們會在輸入框周圍添加一個淡入淡出的動畫效果。

除了文本輸入框，CSS3動畫還可以用于創建其他類型的動畫效果。例如，我們可以使用CSS3動畫來創建旋轉效果。

下面是一個使用CSS3動畫創建旋轉效果的示例：

body {

background-color: #fff;

.rotate {

position: relative;

width: 100px;

height: 100px;

.rotate:before,

.rotate:after {

content: "";

position: absolute;

left: 50%;

top: 0;

width: 50px;

height: 100px;

transform: rotate(-45deg);

transform-origin: 0 100%;

.rotate:after {

left: 0;

transform: rotate(45deg);

transform-origin: 100% 100%;

在這個示例中，我們創建了一個包含兩個旋轉元素的文檔。