HTML动画效果可以通过CSS和JavaScript来实现，下面给出一些常见的动画效果及其代码。
1. 内容逐字显示动画（Typewriter Animation）
这个效果可以使文本内容一个个字逐渐出现，营造打字机打字的效果。
HTML：
```html
Animated Typewriter Effect
```
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); }
}
```