|css3动画教程详解！

文章图片

前几节课我们已经讲了关于2d转换的相关知识，其中包括移动、旋转和缩放，这节课我们就来讲讲HTML中css动画的相关知识。
1.css动画和过渡的区别1）css过渡需要有一个事件触发（像 :hover等），才会起作用，而css动画不需要。
2）动画可以定义很多个关键帧，而过渡不可以。
3）用过渡和动画做一个鼠标悬停时产生动效的效果，当鼠标移开时，用过渡做的效果会缓慢的变回原来的样子，而动画是唰的一下变回原来的样子。

2.css动画的基本操作：第一步，需要定义动画
@keyframes 动画的名称 <{p>0% <{p>动画的起始位置

100% <{p>动画的最终位置

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

3.css动画实例：我们设置一个div元素，并使元素能够在页面打开时，从左向右移动。
第一步，设置一个div元素：

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

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

【|css3动画教程详解！】这样我们就完成了一个简单的动画效果。