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 花费时间;
}