32-animation动画

animation

• 完成自动播放动画

  • flash动画
  • animation动画
  • js脚本编写动画

• 什么是动画？

  

• 概念：由许多帧图像组合，连续播放的动画状态

  • 帧：表示一秒之内切换图片的数量，帧数越大，表示动画越流畅

• 关键帧：表示盒子状态发生变化的关键帧数

  • 盒子向右移动500px

    • 开始运动——结束运动，两个关键帧

  • 盒子变圆，再向右移动移动500格个像素

    • 变圆——移动——结束，三个关键帧

定义动画

1.写法一
@keyframes 动画名称{
    /* 开始状态 */
    form{
    }
    /* 结束状态 */
    to{
    }
}
2.写法二
@keyframes 动画名称{
    0%{
    }
    80%{
    }
    100%{
    }
}

• 百分比表示时，跨度越大表示该动画持续时间分配越多

动画属性设置

• animation-name：设置动画名称

• animation-duration：设置动画时长，单位为秒或者毫秒

• animation-timing-function：设置动画执行速率

  • ease:以低速开始,变快,最后以低速结束
  • linear:匀速运动
  • ease-in:以低速开始
  • ease-out:以低速结束
  • ease-in-out:以低速开始和结束
  • cubic-bezier():通过贝塞尔曲线设置
  • cubic-bezier.com/

• `animation-delay：设置动画延迟执行时间

• `animation-itaration-count：设置动画的执行次数

  • n：数字，表示执行几次
  • infinite：表示无限执行

• `animation-direction：设置动画执行方向

  • normal:默认值，正向执行
  • reverse:反向执行
  • alternate：奇数次正向，偶数次反向
  • alternate-reverse:奇数次反向，偶数次正向

• animation-fill-mode：设置动画封面效果

  • backwards：开始状态作为封面
  • forwards：结束状态作为封面

• animation-play-state：设置动画状态

  • running：执行
  • paused：暂停

• animation：复合属性

  animation: name duration timing-function delay iteration-count direction fill-mode;