前几节课我们已经讲了关于2d转换的相关知识，其中包括移动、旋转和缩放，这节课我们就来讲讲HTML中css动画的相关知识。

1.css动画和过渡的区别

1）css过渡需要有一个事件触发（像 :hover等），才会起作用，而css动画不需要。
2）动画可以定义很多个关键帧，而过渡不可以。
3）用过渡和动画做一个鼠标悬停时产生动效的效果，当鼠标移开时，用过渡做的效果会缓慢的变回原来的样子，而动画是唰的一下变回原来的样子。

2.css动画的基本操作：

第一步，需要定义动画

@keyframes 动画的名称 {
0% {
动画的起始位置
}
100% {
动画的最终位置
}

第二步，使用动画：

首先使用animation-name调出动画的名称，其次用animation-duration设置动画的时长。

3.css动画实例：

我们设置一个div元素，并使元素能够在页面打开时，从左向右移动。

第一步，设置一个div元素：

第二步，我们先定义一个动画，动画的起始位置为0，向右移动了1000像素，其中0%代表起始位置，100%代表最终的位置，我们通过translate设置图像的移动。

第三步，定义好动画之后，我们就需要通过animation-name调用动画的名称和用animation-duration设置动画的时长。

这样我们就完成了一个简单的动画效果。