Call animation - Active and Ringining

CSS only

by Jithin Raj P R

HTML

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
  <div>
    <h5>Active call v3</h5>
    <span class="active_phone2">
  		<i class="fa fa-phone"></i>
      <span class="cover">
        <span class='wave2 one'></span>
        <span class='wave2 two'></span>
        <span class='wave2 three'></span>
      </span>
    </span>
  </div>
  <div>
    <h5>Active call v2</h5>
    <span class="active_phone2">
  		<i class="fa fa-phone"></i>
      <span class="cover">
        <span class='wave one'></span>
        <span class='wave two'></span>
        <span class='wave three'></span>
      </span>
    </span>
  </div>
  <div>
    <h5>Active call</h5>
    <span class="active_phone">
  		<i class="fa fa-phone"></i>
    </span>
  </div>
  <div>
    <h5>Incoming call</h5>
    <span class="ringing_phone">
  		<i class="fa fa-phone"></i>
    </span>
  </div>

CSS

body {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-around;
}
.ringing_phone,
.active_phone,
.active_phone2 {
    display: inline-block;
    color: #fff;
    border-radius: 50%;
    background: #4CAF50;
    padding: 5px;
    width: 50px;
    height: 50px;
    text-align: center;
    position: relative;
    margin: 0 10px;
  }

  .ringing_phone i,
  .active_phone i,
  .active_phone2 i {
    line-height: 50px;
    font-size: 2.25em;
  }

  .ringing_phone i {
    animation: shake 2s infinite cubic-bezier(.36, .07, .19, .97) both;
  }

  .active_phone:after {
    position: absolute;
    content: '';
    top: 50%;
    left: 50%;
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(-50%) translateY(-50%);
    border-radius: 50%;
    padding: 0.5em;
    animation: activeCall 2s ease-in-out infinite both;
  }


  .active_phone2:after {
    content: '';
    display: block;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(#e8a, 1), rgba(#def, 0) 80%, rgba(white, .5));
    z-index: 11;
    transform: translate3d(0, 0, 0);
  }

  .active_phone:before,
  .active_phone2:before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    animation: activeCall2 4s linear infinite both;
  }

  .ringing_phone:after,
  .ringing_phone:before {
    position: absolute;
    content: '';
    opacity: 0;
    border-right: 2px solid #ffffff;
    width: 15px;
    height: 15px;
    left: 40%;
    top: 28%;
    border-radius: 50%;
    transform: rotate(-40deg);
    animation: fadeInOne 2s infinite both;
  }

  .ringing_phone:before {
    width: 20px;
    height: 20px;
    left: 40%;
    top: 20%;
    animation: fadeInTwo 2s infinite both;
  }

  .active_phone2 i {
    z-index: 10;
    position: relative;
  }

  .active_phone2 .cover {
    position: absolute;
    width:...