常见呼吸灯闪烁动画最近在需求里遇到了一个手指引导交互的动画需求。这篇文章就来讲讲如何CSS实现这个动画，如下图所示： 简

最近在需求里遇到了一个手指引导交互的动画需求。这篇文章就来讲讲如何CSS实现这个动画，如下图所示：

简单分析了一下效果，是一个手指移动到某处位置，然后会触发呼吸灯闪烁的效果，所有实现整个动画可以分两步：

呼吸灯闪烁动画

这里介绍下我遇到过得几种呼吸灯闪烁动画

第一种效果

    @keyframes twinkling {
      0% {
        opacity: 0.2;
        transform: scale(1);
      }

      50% {
        opacity: 0.5;
        transform: scale(1.12);
      }

      100% {
        opacity: 0.2;
        transform: scale(1);
      }
    }
    .circle {
      border-radius: 50%;
      width: 12px;
      height: 12px;
      background: green;
      position: absolute;
      top: 36px;
      left: 36px;

      &::after {
        content: "";
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        border-radius: 50%;
        background: greenyellow;
        animation: twinkling 1s infinite ease-in-out;
        animation-fill-mode: both;
      }
    }

第二种效果

    @keyframes scale {
      0% {
        transform: scale(1)
      }

      50%,
      75% {
        transform: scale(3)
      }

      78%,
      100% {
        opacity: 0
      }
    }

    @keyframes scales {
      0% {
        transform: scale(1)
      }

      50%,
      75% {
        transform: scale(2)
      }

      78%,
      100% {
        opacity: 0
      }
    }

    .circle {
      position: absolute;
      width: 12px;
      height: 12px;
      background-color: pink;
      border-radius: 50%;
      top: 36px;
      left: 36px;
    }

    .circle:before {
      content: '';
      display: block;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      opacity: .4;
      background-color: pink;
      animation: scale 1s infinite cubic-bezier(0, 0, .49, 1.02);
    }

    .bigcircle {
      position: absolute;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      opacity: .4;
      background-color: pink;
      top: 36px;
      left: 36px;
      animation: scales 1s infinite cubic-bezier(0, 0, .49, 1.02);
    }

第三种效果

 @keyframes scaless {
      0% {
        transform: scale(1)
      }

      50%,
      75% {
        transform: scale(3)
      }

      78%,
      100% {
        opacity: 0
      }
    }

    .circle {
      position: absolute;
      width: 12px;
      height: 12px;
      background-color: transparent;
      border-radius: 50%;
      top: 36px;
      left: 36px;
    }

    .circle:before {
      content: '';
      display: block;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      opacity: .7;
      border: 3px solid hotpink;
      background-color: transparent;
      animation: scaless 1s infinite cubic-bezier(0, 0, .49, 1.02);
    }

小手移动动画

    @keyframes animation-hand-move {
      0% {
        transform: translate(0, 0);
      }

      20% {
        transform: translate(-80px, -50px);
      }

      25% {
        transform: translate(-80px, -50px) scale(0.92) rotate(-3deg);
        opacity: 1;
      }

      75% {
        transform: translate(-80px, -50px) scale(0.92) rotate(-3deg);
        opacity: 1;
      }

      90% {
        transform: translate(-50px, -40px) scale(1) rotate(0deg);
        opacity: 0.6;
      }

      100% {
        opacity: 0;
      }
    }
    .hard {
      position: absolute;
      top: 200px;
      left: 318px;
      width: 61px;
      height: 69px;
      background-size: contain;
      background-repeat: no-repeat;
      background-image: url('./img//174ba1f81a4d0d91a7dc45567b59fd8b.png');
      animation: animation-hand-move 4s infinite linear;
    }

完整动画代码

  <div class="card">
    <View class="round circle"></View>
    <View class="round small-circle"></View>
    <View class="round less-circle"></View>
    <div class="hard"></div>
  </div>
  
  .card {
      margin: 100px auto;
      width: 480px;
      height: 300px;
      background-color: #333333;
      border-radius: 16px;
      position: relative;
    }

    .hard {
      position: absolute;
      top: 200px;
      left: 318px;
      width: 61px;
      height: 69px;
      background-size: contain;
      background-repeat: no-repeat;
      background-image: url('./img/174ba1f81a4d0d91a7dc45567b59fd8b.png');
      animation: animation-hand-move 4s infinite linear;
    }

    .round {
      position: absolute;
      top: 144px;
      left: 227px;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background-color: transparent;

      &::before {
        content: '';
        position: absolute;
        border-radius: 50%;
        background: transparent;
        width: 100%;
        height: 100%;
        top: 50%;
        left: 50%;
        border: 6px solid rgba(255, 255, 255, 0.5);
        pointer-events: none;
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
      }
    }

    .circle {
      &::before {
        animation: animation-wave 4s infinite linear;
      }
    }

    .small-circle {
      &::before {
        animation: animation-small-wave 4s infinite linear;
      }
    }

    .less-circle {
      &::before {
        animation: animation-less-wave 4s infinite linear;
      }
    }

    @keyframes animation-wave {

      0%,
      20%,
      100% {
        opacity: 0;
      }

      25% {
        width: 0px;
        height: 0px;
        transform: translate(-50%, -50%);
        opacity: 1;
      }

      75% {
        width: 64px;
        height: 64px;
        transform: translate(-50%, -50%);
        opacity: 0;
      }
    }

    @keyframes animation-small-wave {

      0%,
      20%,
      100% {
        opacity: 0;
      }

      42% {
        width: 0px;
        height: 0px;
        transform: translate(-50%, -50%);
        opacity: 1;
      }

      75% {
        width: 64px;
        height: 64px;
        transform: translate(-50%, -50%);
        opacity: 0;
      }
    }

    @keyframes animation-less-wave {

      0%,
      20%,
      100% {
        opacity: 0;
      }

      59% {
        width: 0px;
        height: 0px;
        transform: translate(-50%, -50%);
        opacity: 1;
      }

      75% {
        width: 64px;
        height: 64px;
        transform: translate(-50%, -50%);
        opacity: 0;
      }
    }

    @keyframes animation-hand-move {
      0% {
        transform: translate(0, 0);
      }

      20% {
        transform: translate(-80px, -50px);
      }

      25% {
        transform: translate(-80px, -50px) scale(0.92) rotate(-3deg);
        opacity: 1;
      }

      75% {
        transform: translate(-80px, -50px) scale(0.92) rotate(-3deg);
        opacity: 1;
      }

      90% {
        transform: translate(-50px, -40px) scale(1) rotate(0deg);
        opacity: 0.6;
      }

      100% {
        opacity: 0;
      }
    }