前端学习记录——CSS动画模块

动画模块animation

基本格式

  @keyframes 动画名称
	｛
	from{}
	to{}
		｝
	可以改变任意多的样式任意多的次数。既可以用关键词 "from" 和 "to"，或用百分比来规定变化发生的时间，可以在 0% 和 100%之间任意取值。一般情况下，推荐0% 是动画的开始，100% 是动画的完成。
 动画的三个要素：
	  1、必须有属性值发生变化；
	  2、必须明确哪个属性值在发生变化；
	  3、必须制定动画的持续时长。
与过渡效果不同的是，动画效果不需要事件触发， 在 @keyframes 中创建动画时，需要把它捆绑到某个选择器，否则不会产生动画效果，一旦完成绑定，页面加载完成之后即可自动运行。
	  animation-name:动画的名称
	  animation-duration: 2s;动画持续时长
       	  animation-direction: alternate;动画的方向，有normal和alternate;两个取值，默认normal。当取值为alternate时，会进行反方向的动画效果；
        	  animation-iteration-count: Infinite;动画发生的次数，既可以规定任意的次数，也可以取值infinite，即为无限循环。
	  animation-play-state：running；动画发生的状态，有running和paused两个取值，默认为running；
	  animation-fill-mode：none;规定动画在播放之前或之后，其动画效果是否可见。取值有四个：
			1、none	不改变默认行为。
			2、forwards	当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
			3、backwards	在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
			4、both	向前和向后填充模式都被应用。

	在设计云层浮动效果的时候，需要注意的点：
	  1、采用无序列表来设计，每个图片以背景的形式分布在每一个li标签里面。
	  2、通过设置不同的图片在相同时间内移动不同的距离改变速度，达到参差不齐的移动效果；
	  3、因为我们是从左边开始移动的，每当移动一段距离之后，左边就会空出来一部分，这部分不再显示图片。仔细分析，可以通过扩展Li标签的宽度，默认情况下，扩展方向为向右方向扩展，所以此时想要左边不空出来，可以调整云层移动的方向，即使其向左移动。