一：CSS3动画简介

动画(animation) 是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用于实现复杂的动画效果。

相比较过度，动画可以实现更多的变化，更多的控制，连续播放等效果。

二：动画的基本使用

制作动画分为两步：

  1. 先定义动画
  2. 再使用(调用)动画

1.用Keyframes定义动画(类似定义类选择器)

@keyframes 动画名称 {
    0%{
        width: 100px;
    } 
    100% {
        width: 200px;
    }
    
}

动画序列

  • 0%动画的开始，100%是动画的完成，这样的规则就是动画序列。
  • 在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
  • 动画是元素从一种样式逐渐变为另一种样式的效果，你可以改变任意多的样式任意的次数
  • 请用百分比来规定变化发生的时间，或用关键词"form"和"to"，等同于0%和100%。

2.元素使用动画

div {
      width: 200px;
      height: 200px;
      background-color: aqua;
      margin: 100px auto;
      /*调用动画                  */ 
      animation-name: 动画名称;
      /*持续时间 */
      animation-duration: 持续时间; 
}
5.2 动画常用的属性

属性

描述

@keyframes

规定动画。

animation

所有动画属性的简写属性，除了animation-play-state属性

animation-name

规定@keyframes动画的名称.（名称）

animation-duration

规定动画完成一个周期所花费的秒或毫秒。默认的是0（必须的）

animation-timing-function

规定动画的速度曲线，默认的是"ease"

animation-delay

规定动画何时开始，默认是0

animation-iteration-count

规定动画播放的次数，默认是1，还有infinite

animation-direction

规定动画是否在下一周期是否逆向播放，默认是‘normal“，alternate逆播放

animation-play-state

规定动画是否正在运行或者暂停，默认是"running"，还有”paused“

animation-fill-mode

规定动画结束后的状态，保持forwards回到起始backwards

5.3动画简写属性

animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态。

animation: myfirst 5s linear 2s infinite alternate;
  • 简写属性里面不包含animation-play-state
  • 暂停动画：animation-play-state: paused; 经常和鼠标经过等其他配合使用
  • 想要动画走起来，而不是直接跳回来：animation-direction: alternate
  • 盒子动画结束之后，停在结束位置：animation-fill-mode:forwards
5.4 速度曲线

animation-timing-function:规定动画的速度曲线，默认是“ease”

值

描述

linear

动画从头到尾的速度是相同的，匀速

ease

默认，动画一低速开始，然后加快、在结束前变慢

ease-in

动画从低速开始

ease-out

动画以低速结束

ease-in-out

动画以低速从开始到结束

steps()

指定了时间函数中的间隔数量