CSS Blinking Dot

Well - not sure what you might use this for but perhaps you may want to draw the attention of your learners to something.

I am more of a JavaScript guy so since I cannot use that - I have been trying to sharpen my CSS skills so I was trying to play with some animation ideas.

Here is one that you’re free to use. Adjust anything to your liking.
There are two parts here. 

1. CSS for the Branding and Look
2. HTML for your widget or other page.

/* Blinking dot */

/* This CSS goes in the Branding and Look Section */
#blink {
  width: 50px;
  height: 50px;
  background-color: red;
  border-radius: 100px;
  margin: 20px;
  animation-name: blink;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
}

@keyframes blink {
  50% {opacity: 0;}
}


/* This is the HTML code for your widget where you want the blinking dot */
<div id="blink">
</div>
<p style="margin:20px;">
Attention please! This is an announcement that you don't want to miss.
</p>

Here is how it looks - (hopefully this shows up when I post)