css-动画animation的使用

动画

动画和过渡类似，都是可以实现一些动态的效果，不同的是过渡需要在某个属性发生变化时才会触发。

动画可以自动触发动态效果

	设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行每一个步骤

@keyframes test {
     

            /* from表示动画的开始位置 也可以使用 0% 表示 */
            from {
     
                margin-left: 0;
            }

            /* to表示动画的结束位置  也可以使用 100% 表示*/
            to {
     
                margin-left: 700px;
            }
        }

animation的相关属性

<style>
	.box1{
      
		width:200px;
		height:200px;
		/*设置当前元素生效的关键帧的名字*/
		animation-name:test;
		/*设置动画的执行时间*/
		animation-duration: 2s;
		/*动画的延时*/
		animation-delay:1s;
		/*动画的执行次数*/
		animation-iteration-count:infinite;
		/*动画运行的方向*/
		animation-direction:alternate;
		/*动画的执行状态*/
		animation-play-state:running;
		/*动画的填充模式*/
		animation-fill-mode:both;	
		/*动画的速度*/
		animation-timing-function:linear;
	}

	@keyframes test {
      

            /* from表示动画的开始位置 也可以使用 0% 表示 */
            from {
      
                margin-left: 0;
                background:#fff;
            }

            /* to表示动画的结束位置  也可以使用 100% 表示*/
            to {
      
                margin-left: 700px;
                background:blue;
            }
        }
style>

<div class="box1">div>

1. animation-name 设置当前元素生效的关键帧的名字

2. animation-duration 设置动画的执行时间

3. animation-delay 动画的延时

4. animation-iteration-count 动画的执行次数
 可选值：次数 / infinite 无限执行

5. animation-direction 设置动画运行的方向
 可选值：
  normal 默认值 从 from 向 to 运行 每次都是这样
  reverse 从 to 向 from 运行 每次都是这样
  alternate 从 from 向 to 运行 重复执行动画时反向执行
  alternate-reverse 从 to 向 from 运行 重复执行动画时反向执行

6. animation-play-state 设置动画的执行状态
 可选值：
  running 默认值 动画执行
  paused 动画暂停

8. animation-fill-mode 设置动画的填充模式
 可选值：
   none 默认值 动画执行完毕，元素回到原来的位置
   forwards 动画执行完毕，元素会停止在动画结束的位置
   backwards 动画延时等待时，元素就会处于开始位置
   both 结合了 forwards 和 backwards

9.animation-timing-function 设置动画的速度
 可选值：
   linear 动画作匀速运动
   ease 默认值 动画以低速开始，然后加快，在结束前变慢
   ease-in 动画以低速开始
   ease-out 动画以低速结束
   ease-in-out 动画以低速开始和结束。

animation-fill-mode中both和forward的区别

如果动画无延迟，forwards 和 both 表现出来的效果是相同的；
但是在有延迟的时候表现出来的效果会些不同，虽然forwards 和 both 结束效果相同（停留在最后一个关键帧中定义的状态），但是在开始时 both 会应用 backwards（第一帧定义的状态） 的效果。

比如上述代码，在设置both时，背景颜色会直接出现，而设置forwards时，背景颜色等待1s（设置的animation-delay动画延时）后才出现，因此才说，both结合了forwards和backwards。