Css Blink Animation

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="shortcut icon" href="https://1xpto.netlify.app/items/favicon.gif" type="image/x-icon">
  <link rel="name" href="https://www.facebook.com/ManuelJSAndrade/">
  <link rel="name" href="https://www.instagram.com/jolie1xpto/">
  <link rel="tag" href="https://1xpto.netlify.app/articles/html/Css Blink Animation">
  <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Css Blink Animation</title>
  <style>

    body {
      cursor: context-menu;
      margin: 0;
      font-family: calibri;
      overflow-x: hidden;
    }

    button {
      border: none;
      outline: none;
      background-color: red;
    }

    textarea {
      border: none;
      background-color: white;
      resize: none;
      outline: none;
    }

    a {
      text-decoration: none;
    }

    audio {
      background-color: rgba(128, 128, 128, 0.1);
    }

             /*  ------------  default  ---------------   */


    .one {   border:20px solid red;width:0;border-radius:50%;
             margin:100px;   }


</style>
</head>
<body>

<center><div class='one'></div></center>


  <script>

     delay = 500;

     one = document.getElementsByClassName("one")[0];

     setInterval(()=> {
           one.style.opacity = "1";
           setTimeout(()=> {  one.style.opacity = "0";   }, delay);
    }, 1000);


</script>
</body>
</html>