1、CSS3动画

用关键词from、to，或者用比分比来定义
定义动画语法：

@keyframes name {
  from|0%{
    css样式
  }
  to|100%{
    css样式
  }
}

执行动画语法：

animation: name duration timing-function delay iteration-count direction fill-mode play-state;
name：要执行的动画名称
duration：设置动画的持续时间,单位可以是秒(s)和毫秒(ms)
timing-function：设置动画的速率
    ease：逐渐变慢(默认)
    linear：匀速
    ease-in：加速
    ease-out：减速
    ease-in-out：先加速后减速
delay：延迟执行,单位可以是秒(s)和毫秒(ms)
iteration-count：循环次数，infinite为无限次
direction：播放的方向
    normal：向前播放(默认值)
    alternate：偶数次向前播放，奇数次向反方向播放
fill-mode：
    none：不修改样式，forwards 当动画结束后，修改元素样式为最后一帧的样式
    backwards：当动画开始时，修改元素样式为第一帧样式。比如设置了等待时间，等待时间中也会修改元素样式为第一帧样式
    both：遵循forwards和backwards 的规则，开始后结束都修改样式。
play-state：播放状态，running运行中，paused停止播放

示例代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CSS3新特性-动画</title>
    <style>
      div{
        width: 100px;
        height: 100px;
        box-shadow: 10px 10px 10px gray;
        /* 执行动画 */
        animation: myDH 3s linear 0s infinite normal none;
      }
      div:hover{
        animation-play-state: paused;
      }
      @keyframes myDH {
        0%{
          background-color: rebeccapurple;
        }
        50%{
          background-color: green;
        }
        100%{
          background-color: rebeccapurple;
        }
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

2、呼吸动画效果

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CSS3新特性-呼吸动画</title>
    <style>
      div{
        width: 100px;
        height: 100px;
        margin: 40px auto;
        background-color: #2b92d4;
        border-radius: 5px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
        animation: breathe 2700ms ease-in-out 0s infinite alternate none;
      }
      @keyframes breathe {
        0%{
          opacity: 0.2;
          box-shadow: 0 1px 2px rgba(255, 255, 255, .1);
        }
        50%{
          opacity: 0.5;
          box-shadow: 0 1px 2px rgba(18, 190, 84, .76);
        }
        100%{
          opacity: 1;
          box-shadow: 0 1px 30px rgba(59, 255, 255, 1);
        }
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Web 前端工程师-2022

17.动画

1、CSS3动画

2、呼吸动画效果