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 :