Css動畫大全

CSS動畫可以使用CSS的動畫和過渡效果來實現。以下是一些常用的CSS動畫效果大全：

1. 淡入淡出效果：使用`transition`屬性可以實現淡入淡出效果，例如：

```css

div {

opacity: 0;

transition: opacity 2s;

}

div.show {

opacity: 1;

}

```

2. 移動效果：使用`animation`和`@keyframes`可以創建移動動畫，例如：

```css

div {

width: 100px;

height: 100px;

background: red;

animation: move 2s infinite;

}

@keyframes move {

0% { left: 0px; }

50% { left: 200px; }

100% { left: 0px; }

}

```

3. 旋轉效果：使用`transform`屬性中的`rotate`可以實現旋轉動畫，例如：

```css

div {

width: 100px;

height: 100px;

background: red;

animation: rotate 2s infinite linear;

}

@keyframes rotate {

from { transform: rotate(0deg); }

to { transform: rotate(360deg); }

}

```

4. 縮放效果：使用`transform`屬性中的`scale`可以實現縮放動畫，例如：

```css

div {

width: 100px;

height: 100px;

background: red;

animation: scale 2s infinite ease-in-out;

}

@keyframes scale {

0% { transform: scale(1); }

50% { transform: scale(1.5); }

100% { transform: scale(1); }

}

```

5. 滑動效果：使用`transform`屬性中的`translateX`或`translateY`可以實現滑動動畫，例如：

```css

div {

width: 200px;

height: 200px;

background: red;

animation: slide 2s infinite ease-in-out;

}

@keyframes slide {

from { transform: translateX(0); }

to { transform: translateX(50px); }

}

```

這些只是一些基本的CSS動畫效果，你可以根據需要創建更複雜的動畫效果。同時，還可以結合JavaScript和jQuery等其他技術來實現更高級的動畫效果。

以上就是【Css動畫大全】的相關內容，敬請閱讀。