动画

@keyframes规则

动画将在特定时间逐渐从当前样式更改为新样式。

要使动画生效，必须将动画绑定到某个元素。 这些动画在执行完成之后都会回到最开始的样子，这也是为什么后面会出现一个保留关键帧的属性，利用animation-fill-mode，就可以让样式停留在最后一帧

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;//指定动画名字
  animation-duration: 4s;//动画时间
}

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

//也可以通过百分比设定
//下面的例子将在动画完成 25％，完成 50％ 以及动画完成 100％ 时更改 <div> 元素的背景颜色：
@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

animation-name-动画名字

animation-duration-动画持续时间

animation-delay-动画延迟时间

可以是正值也可以是负值

animation-iteration-count

定动画应运行的次数 infinite则是将动画永远持续下去

animation-direction

指定是向前播放、向后播放还是交替播放动画

normal - 动画正常播放（向前）。默认值
reverse - 动画以反方向播放（向后）
alternate - 动画先向前播放，然后向后
alternate-reverse - 动画先向后播放，然后向前

animation-time-function

规定动画的速度曲线。

ease - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）
linear - 规定从开始到结束的速度相同的动画
ease-in - 规定慢速开始的动画
ease-out - 规定慢速结束的动画
ease-in-out - 指定开始和结束较慢的动画
cubic-bezier(n,n,n,n) - 运行您在三次贝塞尔函数中定义自己的值

animation-fill-mode

指定动画的填充模式

none - 默认值。动画在执行之前或之后不会对元素应用任何样式。
forwards - 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。
backwards - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。
both - 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。

属性简写

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

等于

div {
  animation: example 5s linear 2s infinite alternate;
}

CSS-动画 | 青训营笔记

动画