CSS 关键帧动画

1.定义关键帧:

使用 @keyframes 规则来定义动画的名称和关键帧。

@keyframes example {
  0% {background-color: red;}
  50% {background-color: yellow;}
  100% {background-color: green;}
}

使用from和to

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

不能直接混合使用百分比和 from/to 关键字

 可以省略 0% 和 100% 关键帧，但前提是你已经定义了其他百分比的关键帧。

@keyframes example {
  50% {
    background-color: yellow;
  }
}

2.使用动画:

div {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation-name: example; /* 引用关键帧的名称 */
  animation-duration: 4s; /* 动画持续时间 */
  animation-timing-function: ease-in-out; /* 动画速度曲线 */
  animation-delay: 1s; /* 动画延迟时间 */
  animation-iteration-count: infinite; /* 动画循环次数 */
  animation-direction: alternate; /* 动画的方向 */
}

3.简写动画属性:

div {
  animation: example 4s ease-in-out 1s infinite alternate;
}

关于 animation-timing-function属性的设置可以参考我的另一篇CSS中transition过度-优快云博客

4.关于 animation-direction属性:

 1,normal  默认值

2, reverse   反向播放

3,  alternate    先反播在正播 , 交替进行

 

结语:

常用到的点就这些,一些东西没有讲到请见谅!