CSS3動畫是一種通過CSS屬性控制頁面元素運動的技術，能夠創建出非常炫酷和交互性的頁面效果。以下是CSS3動畫的簡寫方式：
CSS3動畫可以通過在元素上添加動畫屬性來控制元素的移動、旋轉、縮放等運動效果。常用的動畫屬性包括：
- `transform`：用于控制元素的方向、旋轉、縮放等運動效果。
- `transform-origin`：用于指定元素旋轉和縮放的起點和終點坐標。
- `transform-style`：用于指定元素的動畫效果，例如平移、旋轉、縮放等。
下面是一個簡單的CSS3動畫示例，它展示了一個元素在水平和垂直方向上旋轉90度：
```html
<div class="animation">
<div class="start">Hello</div>
<div class="animation-end"></div>
</div>
```css
.animation {
position: relative;
width: 200px;
height: 200px;
.start {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: blue;
animation: rotate 1s infinite;
.animation-end {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: blue;
animation: rotate 1s infinite;
@keyframes rotate {
0% {
transform: rotate(0deg);
100% {
transform: rotate(360deg);
在這個示例中，我們創建了一個名為`animation`的div元素，它設置了一個相對定位，寬度和高度均為200像素，背景顏色為藍色。然后我們在`start`和`end`元素上添加了一個動畫，使元素在水平和垂直方向上旋轉90度。最后，我們在`animation`元素上添加了一個`@keyframes`規則，定義了動畫的所有操作。
通過使用CSS3動畫，我們可以創建出非常炫酷和交互性的頁面效果，使得網頁更加生動有趣。