<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

<div class="circle-bolt">
  <i class='fa fa-bolt bolt2'></i>
  <i class='fa fa-bolt'></i>
</div>
body {
  background: #000;
}

.circle-bolt {
  position: absolute;
  top: 100px;
  left: 100px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;

  i {
    position: absolute;
    z-index: 100;
    font-size: 27px;
    color: black;
  }

  &:before {
    content: "";
    position: absolute;
    display: block;
    width: 80px;
    height: 80px;
    box-sizing: border-box;
    border-radius: 200px;
    background-color: yellow;
    animation: pulse-bolt 1.25s cubic-bezier(0.315, 0.61, 0.355, 1) infinite;
  }

  &:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 20px;
    height: 20px;
    background-color: yellow;
    border-radius: 200px;
    animation: circle-bolt 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
  }
}

@keyframes pulse-bolt {
  0% {
    transform: scale(0.33);
  }
  80%,
  100% {
    opacity: 0;
  }
}

@keyframes circle-bolt {
  0% {
    transform: scale(0.7);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.7);
  }
}

/* second bolt */
.circle-bolt .bolt2 {
  position: absolute;
  color: white;
  animation: circle-bolt2 1.25s infinite;
  opacity: 1;
}
@keyframes circle-bolt2 {
  0% {
    transform: scale(0.7);
    opacity: 1;
  }
  50% {
    transform: scale(3);
    opacity: 0.5;
    filter: blur(1px);
  }
  100% {
    transform: scale(0.7);
    opacity: 0;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.