1. 动画（animation）是CSS中具有颠覆性的特征之一，可以设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。<br />相比过渡，动画能够实现更多的变化，更多的控制，连续自动播放的效果等。

动画的基本使用

步骤：
1.定义动画
2.使用（调用）动画

用keyframes定义动画(类似于定义选择器)

@keyframes 动画名称{
  0% {
          width:100px;     //从最开始的样式
  }
  100%{
          width:200px      //结尾动画的样式
  }
}

动画序列

  • 0%是动画的开始,100%是动画的完成
  • 在@keyframes中规定某项CSS样式,就能创建当前样式逐渐改为新样式的动画效果
  • 动画使元素是使元素从一种样式逐渐变化为另一种样式的效果,可以在其中任意次数转换样式效果
  • 通过百分比来调控动画发送的时间,或者用from和to,等同于0%和100%

元素使用动画

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

动画的常用属性

属性 含义
@keyframes 第一动画
animation 动画简写,除了animation-play-state属性
animation-name(必须写) 规定动画的名称
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(回到起始)

动画属性复合写法

animation :动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;
animation: myfirst 5s linear 2s infinite alternate;
           名字     时间 线性播放  2s后开始 循环播放 逆向播放
animation 动画名称 持续时间按 运动曲线 何时开始 播放次数 是否反向 动画起始/结束状态
animation donghua 1.5s ease 0(默认) infinite
(循环)		 alternate(反向) backwards(回到起始)
forwards(停在结束位置)

注意:

  • 简写属性里面不包含animation-play-state(暂停)
  • 暂停动画: animation-play-state: puased; 经常和hover配合使用
  • 想要动画走回来,而不是直接跳回来: animation-direction : alternate; (逆播放)
  • 盒子动画结束后,停在结束位置: animation-fill-mode : forwards; （保持在结束位置）
  • 速度曲线表格 | 值 | 含义 | | —- | —- | | liner | 动画从头到尾速度是相同的,匀速 | | ease | 默认,动画低速开始,然后加快,在结束前变慢 | | ease-in | 动画低速开始 | | ease-out | 动画以低速结束 | | ease-in-out | 动画低速开始低速结束 | | steps() | 指定时间函数中的间隔数量 |

多个动画复合写法

中间用逗号来隔开：

animation:myfirst 5s linear 2s infinite alternate,move 1s ease-out,rotate 3s ease;

速度曲线细节

值 描述
linear 动画从头到尾的速度是相同的。匀速
ease 默认。动画以低速开始，然后加快，在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
steps() 指定了时间函数中的间隔数量（步长）

其中关于steps()属性值，通过在动画的每个阶段里进行跳跃而不是平滑过渡，当直接由0%到100%时，设置的steps(数值或者star/end)会将其阶段进行等分，例如steps(10)而动画是0% 50% 100%时，会在0%-50%间等分10个帧数，50%-100%再分10个帧数。