Map-Pin-Animation

CSS3 @-keyframes Animation Quelle: https://tapdaq.com/

by Jens Kühn

HTML

<div class="realtime">
    <span class="point bootup showed" style="top: 50px; left: 50px;"></span>
    <span class="point impression showed" style="top: 100px; left: 50px;"></span>
    <span class="point click showed" style="top: 150px; left: 50px;"></span>
    
    <span class="point bootup" style="top: 50px; left: 100px;"></span>
    <span class="point impression" style="top: 100px; left: 100px;"></span>
    <span class="point click" style="top: 150px; left: 100px;"></span>
</div>

CSS

.realtime {
  width: 100%;
  height: 100%;
  position: relative;
}
.realtime .point {
    position: absolute;
    width: 14px;
    height: 14px;
    margin-left: 34px;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    -webkit-transition-delay: 0s;
    -moz-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
    transition: opacity 0.5s; 
}
.realtime .point.showed {
      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
      opacity: 1; 
}
.realtime .point.bootup:after {
      border-color: #21c650;
}
.realtime .point.bootup:before {
      background-color: rgba(27, 185, 52, 0.19);
      -webkit-box-shadow: inset 0 0 6px #00FF54;
      -moz-box-shadow: inset 0 0 6px #00FF54;
      box-shadow: inset 0 0 6px #00FF54;
}
.realtime .point.click:after {
      border-color: #f70;
}
.realtime .point.click:before {
      background-color: rgba(255, 111, 0, 0.19);
      -webkit-box-shadow: inset 0 0 6px #f70;
      -moz-box-shadow: inset 0 0 6px #f70;
      box-shadow: inset 0 0 6px #f70;
}
.realtime .point:after {
      content: ' ';
      width: 8px;
      height: 8px;
      top: 0;
      left: 0;
      position: absolute;
      -webkit-border-radius: 9px;
      -moz-border-radius: 9px;
      -ms-border-radius: 9px;
      -o-border-radius: 9px;
      border-radius: 9px;
      background: #fff;
      border: 4px solid #00DEFF;
}
.realtime .point:before {
      position: absolute;
      width: 34px;
      height: 34px;
      background-color: rgba(0, 170, 255, 0.19);
      -webkit-box-shadow: inset 0 0 6px #00DEFF;
      -moz-box-shadow: inset 0 0 6px #00DEFF;
      box-shadow: inset 0 0 6px #00DEFF;
      -webkit-border-radius: 18px;
      -moz-border-radius: 18px;
      -ms-border-radius: 18px;
      -o-border-radius: 18px;
      border-radius: 18px;
      content: " ";
      top: -9px;
      left: -9px;
      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
     ...