常见呼吸灯闪烁动画

最近在需求里遇到了一个手指引导交互的动画需求。这篇文章就来讲讲如何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;

      }

    }