css3 实现动画效果,怎样使他无限循环动下去?

html-css0227

css3 实现动画效果,怎样使他无限循环动下去?,第1张

鼠标悬停,图标会一直不停旋转。 

如果实现图标一直不停旋转,则需要使用animation动画。先制作动画的各个关键帧,然后在图标中运用这一动画。

具体操作如下:

把总动画设为4秒,然后前75%也就是3秒都没变化(0-75%),之后的25%也就是1秒做动画就可以了,具体的democan参见demo。

循环动画由几幅画面构成,要根据动作的循环规律确定。但是,只有三张以上的画面才能产生循环变化效果,两幅画面只能起到晃动的效果。

在循环动画中有一种特殊情况,就是反向循环。比如鞠躬的过程,可以只制作弯腰动作的画面,因为用相反的循序播放这些画面就是抬起的动作。掌握循环动画制作方法,可以减轻工作量,大大提高工作效率。因此在动画制作中,要养成使用循环动画的习惯。

物体的变化,可以分解为连续重复而有规律的变化。因此在动画制作中,可以尽制作几幅画面,然后像走马灯一样重复循环使用,长时间播放,这就是循环动画。

动画中的常用方法:

动画中常用的虚线运动、下雨、下雪、水流、火焰、烟、气流、风、电流、声波、人行走、动物奔跑,鸟飞翔,轮子的转动,机械运动以及有规律的曲线运动、圆周运动等等,都可以采用循环动画。

但事情总是一分为二的,循环动画的不足之处就是动作比较死板,缺少变化。为此,长时间的循环动画,应该进一步采用多套循环动画的方式进行处理。