前言：
今天大家对“css3缓慢”大体比较讲究，看官们都想要分析一些“css3缓慢”的相关知识。那么小编也在网上网罗了一些有关“css3缓慢””的相关文章，希望同学们能喜欢，同学们一起来学习一下吧！前几节课我们已经讲了关于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设置动画的时长。
这样我们就完成了一个简单的动画效果。
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #css3缓慢
