HTML动画效果可以通过CSS和JavaScript来实现，下面给出一些常见的动画效果及其代码。

 

1. 内容逐字显示动画（Typewriter Animation）

这个效果可以使文本内容一个个字逐渐出现，营造打字机打字的效果。

 

HTML：

```html

```

 

CSS：

```css

#typewriter {

overflow: hidden;

border-right: .15em solid orange;

white-space: nowrap;

margin: 0 auto;

letter-spacing: .15em;

animation:

typing 3.5s steps(40

end)

 

blink-caret .75s step-end infinite;

}

 

@keyframes typing {

from { width: 0 }

to { width: * }

}

 

@keyframes blink-caret {

from

to { border-color: transparent }

50% { border-color: orange; }

}

```

 

2. 旋转动画（Rotate Animation）

这个效果可以使一个元素沿着一定的轴线旋转。

 

HTML：

```html

```

 

CSS：

```css

#rotate-animation {

width: 100px;

height: 100px;

background-color: red;

animation: rotate 3s infinite linear;

}

 

@keyframes rotate {

0% { transform: rotate(0deg) }

* { transform: rotate(360deg) }

}

```

 

3. 渐变动画（Fade Animation）

这个效果可以使一个元素从透明到不透明或从不透明到透明的过渡。

 

HTML：

```html

```

 

CSS：

```css

#fade-animation {

width: 100px;

height: 100px;

background-color: red;

animation: fade 3s infinite;

}

 

@keyframes fade {

0% { opacity: 0 }

50% { opacity: 1 }

* { opacity: 0 }

}

```

 

4. 缩放动画（Scale Animation）

这个效果可以使一个元素在一定时间内不断放大或缩小。

 

HTML：

```html

```

 

CSS：

```css

#scale-animation {

width: 100px;

height: 100px;

background-color: red;

animation: scale 3s infinite ease-in-out alternate;

}

 

@keyframes scale {

0% { transform: scale(1); }

50% { transform: scale(1.5); }

* { transform: scale(1); }

}

```