一. CSS 动画序列

CSS动画原理

设置关键帧，每一个关键帧都需要秒速动画元素在动画序列期间的给定时间内应如何渲染 ;
中间关键帧越多，表示该动画越复杂 ;

CSS 动画的实现

     // 定义动画,插入关键帧（样式）
     @keyframes move {      // move 为动画名称
         from {      // 开始关键帧 0%
            margin-left：0px;
            margin-top" 0 ;
         }
         50% {      // 中间关键帧
            margin-left：800px;
            margin-top: 0;
         }
         to {        // 结束关键帧 100%
             margin-left:800px
             margin-top:400px;
         }
     }
  
 // animation 简写
 animation：名称 周期时长  动画运行速度(匀速)  延迟  动画循环运行次数 运行方向(方式)
 animation: name duration timing-function   delay  iteration-count direction fill-mode;
    
  div{
  
      animation：move 3s linear 0 infinite alternate-reverse normal
  }

animation的属性

参考MDN文档：developer.mozilla.org/enUS/docs/W…

animation-name: move // @keyframes 动画名称
animation-duration： 3S // 动画完成一个周期所需要的时间长度
animation-timing-function: // 加速度曲线
- linear 匀速(线性的)
- ease-in 加速
- ease-out 减速
- eae-in-out 先加速后减速
- steps(number,start/end) 让动画不连续
  steps 是针对两个关键帧之间的次数,number是将动画分成几小段 start -表示直接开始，也就是开始阶段已经执行了一小段了

animation-delay: 0 // 加载时间和元素动画开始之间的延迟

animation-iteration-count : 1.5 // 动画重复的次数

infinite (无限次数循环)
animation-direction： // 动画是否应在序列中的每次运行时交替方向或重置到起点并重复自身
- normal 默认重置至开始状态并重新开始
- reverse 重置结束状态，反向
- alternate 来回(正向开始)
- alternate-reverse 来回(反向开始)
animation-fill-mode: normal // 动画在执行之前和之后应用的值
animation-play-state: running // 暂停或恢复动画序列
- paused 暂停
- running 恢复

二. JS 动画（封装函数）

缓动动画原理

缓动动画的原理就是让当前运动的物体运动速度慢慢变小，直至停止运动，也就是减速效果,步长step(目标位置-现在位置)/10

封装缓动动画函数

清楚定时器 —— 因为是循环执行定时器的回调函数，因此在每一次重新定义定时器之前，需要清除定时器;
设置定时器 setInterval(callback);
缓动动画的核心 —— 设置步长 step = （目标位置 - 当前位置）/10;
判断步长step的正负(obj移动方向),若为正，向上取值(Math.ceil(step)); 反之，若为负,向下取值(Math.floor(step));
判断当前位置是否为目标位置，若是则清除定时器，结束定时任务，若不是

JS动画补充知识:

问题1. 定时器为 setInterval 而不是 setTimeout？

答: setTimeout 是一次性定时器，也就是定时器内的回调函数被执行一次之后，就不会重复执行 setInterval 是循环执行的定时器；

问题2. callback&&callback() 的理解?-

答： 与逻辑运算(参数1为真，返回参数2) 等同于

       if(callback){
                callback();
            }

动画animation