react使用css3的animation实现hover时候的呼吸灯效果

先上需求和代码

实现效果：一个logo在hover的时候有呼吸灯的效果
实现方式：采用animation动画，具体代码如下：

// 使用styled-components写animation部分。
const PhoneRing = styled.div`
  svg{
    height: 28px;
    width: 28px;
    position: absolute;
    bottom: 16px;
    right: 16px;
  }
  .showCall2{
    opacity: 0;
  }
  .showCall1:hover{
    animation: 1s ease-in 0s infinite reverse both running showCall1;
  }
  .showCall2:hover{
    animation: 1s ease-in 0s infinite reverse both running showCall2;
  }
  @keyframes showCall1 {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes showCall2 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
`;

//在组件中写该logo，两张图片实现gif效果
      <PhoneRing>
        <Call1 className="showCall1" />
        <Call2 className="showCall2" />
      </PhoneRing>

关于animation

首先要先使用@keyframes➕动画的名字来决定元素的哪一个css属性发生变化，这个案例里面需要opacity这个属性变化来实现图片的显示和隐藏。

@keyframes slidein {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

其次在需要动画效果的dom上加animation样式

  .showCall1:hover{
    animation: 1s ease-in 0s infinite reverse both running showCall1; 
    //这里animation的最后一个属性值就是动画的名字，你可以随便起名，但是要和 @keyframes后面的名字一致，否则没法加相应的动画效果
  }
    @keyframes showCall1 {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
    100% {
      opacity: 0;
    }
  }