14day-animation动画

animation 动画

css动画与过渡动画的相同点：可以控制元素从始态到终态属性值在一段时间内发生变化，将变化的过程延长，使其看起来更加平滑。
不同点：动画对变化的方式有更多的选择和控制。能够深度控制整个动画变化的过程。

定义关键帧

帧，就是动画中最小单位的单幅影像画面，相当于电影胶片的每一个镜头。
关键帧，相当于二维动画中的原画。指角色或物体运动变化中关键动作所处的那一帧，关键帧与关键帧之间的每幅图像就可以由软件来创建。

设置关键帧

基础语法：通过@keyframs来进行设置

@keyframs 动画名称 {
  /* 关键帧选择符 */
  /* 0% */
  from{

  }
  10%{

  }
  20%{

  }
  80%{

  }
  /* 100% */
  to{

  }
}

注意事项：

• 关键帧在命名时，尽量不要带有特殊字符，可以下划线和连字符，但是不能以数字开头。另外，不要使用none、paused、running、infinite、backwards和forwards，因为这些都是动画的其他控制属性的属性值。
• 关键帧选择符可以是一组百分数，也可以是关键字from`to`，form代表0%，to代表100%。
• 选择符不一定要按照动画顺序来排列。只是按照顺序来写，更容易维护和辨别。

animation 将动画应用到元素上

想要动画动起来，至少要指明动画的名字，以及动画持续的时间。

animation-name 指定动画名称

animation-name属性的属性值就是在@keyframes声明的名字，可以添加多个，用逗号隔开彼此即可。

{
  animation-name: kern,kern-rotate;
}

默认值为none。

animation-duration 定义动画的时长

{
  animation-duration:1s;
}

表示动画迭代一次用时多久，单位为s（秒）或ms（毫秒）

animation-iteration-count 动画的迭代次数

默认情况下，动画只播放一次，取值为具体整数字，也可以指定infinite属性值来让动画无限循环下去。

{
  animation-iteration-count: 2 | infinite
}

设置动画的播放方向 animation-direction

按照正常思维，动画正常播放流程是从0%到100%，但也可以通过 animation-direction属性控制动画从100%播放到0%，也可以隔一次循环变一次方向

animation-direction:normal | reverse | alternate | alternate-reverse

• normal:默认值，动画每次迭代方向为0-100%
• reverse：逆序播放各次迭代，即100-0%。同时逆转了动画的animation-timing-function;
• alternate：交替迭代，指第一次迭代从0-100%，第二次从100-0%，然后开始一直交替循环下去
• alternate-reverse：逆序交替迭代：与alternate反过来，第一次迭代按reverse播放，第二次按normal播放。

延迟动画播放 animation-delay

定义浏览器把动画附加到元素上之后等待多久开始第一次迭代

{
  animation-delay: 1s;
}

animation-delay属性单位为秒或毫秒，默认情况下，值为0，也就是立即开始播放

animation-timing-function 动画频率

与transition-timing-function非常相似，同样是指明动画在一次循环迭代中如果过渡演进。

animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | steps()

前面五个属性与transition的含义一致，关键在于后面的steps：逐帧动画。

设置动画的播放状态 animation-play-state

用于控制动画播放还是停止

animation-play-state:running | paused

• runing：播放
• paused：暂停
  当动画在运动的过程中被暂停，动画的状态会停留在当前已经运动到的状态，在将状态变为播放时，动画会按照暂停前的状态（位置）继续运动下去，而不会重置整个过程。

动画的填充模式 animation-fill-mode

animation-fill-mode定义动画播放结束后是否应用原来的样式属性，或当动画有延迟时是否应用动画中的样式

{
  animation-fill-mode:none ｜ forwards ｜ backwards ｜ both
}

• forwards：动画结束后，结尾时的动画样式属性将继续应用在元素上
• backwards:当动画元素存在aniamtion-delay时，0%或100%关键中定义的属性会立马作用到元素上，而不会等待延迟结束才作用上去。（会受到动画播放方向影响，如果时0-100%方向播放则会应用0%关键帧的样式，如果是100-0%则会应用100%关键帧的样式）
• both：代表以上两种效果都存在。

复合语法

{
  animation: <animation-name>名称 | <animation-duration>时长 ｜ <animation-timing-function> 频率 ｜ <animation-delay>延迟 ｜ <animation-iteration-count> 次数 ｜ <animation-direction>方向 ｜ <animation-fill-mode> 填充模式 ｜ <animation-play-state>播放状态
}

逐帧动画 steps

steps：步进时序函数
steps函数会把动画分成一系列等长的步幅，接受两个参数：步数，变化点

• 第一个参数：指定函数的间隔数，必须是一个正整数。动画市场将平均分成与步数相对应的段数。例如动画时长1s，步数为10，那么动画将会分成10步完成，一步的时长为100ms。元素会在页面中重新绘制10次，间隔为100ms一次。
• 第二个参数：start ｜ end（默认值）
  • end：表示在一个周期的结尾赋值，当值为end时会由默认状态到0%关键帧位置第一次变更值作为第一步，会忽略最后一步。
  • start：表示在一个周期的开始进行赋值，也就是说不存在0%。