animition动画

animition动画

• 作用：将定义好的动画绑定到元素上

  动画和过渡类似，都可以实现一些动态的效果，不同的时过渡要在某个样式属性变化时才能触发，动画可以自动触发动态效果

• 动画的使用步骤：先定义动画，再绑定到调用动画的元素上

  1:定义动画： @keyframes 关键帧 @不能省略

  关键帧设置了动画执行的每一个步骤

@keyframes 动画名{
    0%{   
      样式声明   
    }
    50%{
     样式声明
    }
    100%{
     样式声明
    }
}

0%至100%是指的动画序列

0%（from）是动画的开始，100%（to）是动画的结束

使用百分比来划分动画花费的时间，我们可以将花费时间划分为任意多份，设置多个状态的变化

百分比要是整数也可以是小数，百分比就是总时间的划分

在@keyframes中规定某种动画样式，就能创建由当前样式逐渐改为新样式的动画效果

2:调用动画

E{
    animation:动画名称 花费时间 运动曲线 延迟时间 动画播放次数 是否轮流反复播放动画 动画不播放时的样式；
}

animation是简写属性，里面的每一项属性都可以单独设置,简写也可以省略某些项

• 无论简写还是单独设置，动画名称和花费时间是不能省略的

  • animation-name 要对元素绑定的关键帧的名字（动画名称）

  • animation-duration 动画花费的时间 duration 持续

  • animation-timing-function 动画运动曲线

    ease

    linear 匀速

    ease-in

    ease-out

    ease-in-out

    贝塞尔曲线

    steps（n）

  • animation-delay 动画延迟时间

• animation-iteration-count 定义动画应该播放的次数

  取值 数值次数 或者 infinite 动画无限次播放

• animation-direction （direction方向） 指定动画执行的方向

  取值：normal 默认值，动画正向播放 即 从from到to 每次都是这样

  reverse 动画反向播放 ，每次都是反着

  alternate 动画正着去反着回来 动画走回来而不是跳回来 要掌握**

  alternate-reverse 动画先反着执行再正着执行

• animation-fill-mode 动画不播方时（即动画完成时或者动画有一个延迟未开始时），要引用到元素的样式

  取值：none 默认值 动画执行完毕元素回到原来的位置

  forwards 动画结束后停止在结束的位置 **

  backwards 动画延时等待时，元素会处于开始位置

  both 结合了frowrads和backwards，动画会在两个方向上扩展动画属性

• 简写属性里不能包含animation-play-state 设置动画的执行状态

  取值：running 默认值 动画执行

  paused；暂停动画 此属性经常与鼠标等操作配合使用。要单独设置

要掌握的属性：animation-fill-mode：forwards；动画结束后停在结束位置

animation-direction：alternate 动画走回来而不是跳回来

可以给一个元素添加多个动画，使用英文,分隔

E{
    animation:动画名称1 花费时间 运动曲线 延迟时间 ...,动画名称1 花费时间；
}