How to create red blinking dot using CSS ?

In this tutorial, we are going to create a red blinking dot/circle using CSS. We will use CSS animation to achieve the same.

Full Source Code :

<style type='text/css'>
  @keyframes blink {
      0% {
        transform: scale(1);
        opacity: .25;
      }
      25%{
        opacity: 1;
      }
      50% {
        opacity: .25;
      }
      75%{
        opacity: 1;
      }
      100% {
        transform: scale(1);
        opacity: .25;
      }
  }
  .blink {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    opacity: .25;
    background-color: red;
    -webkit-animation: blink 1s infinite;
    -moz-animation: blink 1s infinite;
    -o-animation: blink 1s infinite;
    animation: blink 1s infinite;
  }
  .blink:after{
    border-radius: 50%;
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    border: 5px solid #ffffff;
  }
</style>

  
<div class="blink"></div>

Follow this video for complete guidance :