title: Add a blinking animation to a dotted border with CSS
body: <p>I tried to make a animated dotted box border that moving back and forth, kind of blinking style. (Just like the third one with yellow border in the following link.)</p>
  <p><a href="https://i.stack.imgur.com/bMQyL.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bMQyL.jpg" alt="The example labeled 'fat border' has a border with a thick, dashed line where the yellow sections turn white and the white sections turn yellow after a every few seconds." /></a></p>
  <p><a href="http://there4.io/2013/01/03/jquery-animated-borders/" rel="nofollow noreferrer">http://there4.io/2013/01/03/jquery-animated-borders/</a></p>
  <p>Yet, this is built with JavaScript. I am unable to change the dashed border into dotted style.</p>
  <p>When I looked for a CSS solution, rather than moving discretely, most cases I found had a smooth animation.</p>
  <p>eg. <a href="https://css-tricks.com/more-control-over-css-borders-with-background-image/" rel="nofollow noreferrer">https://css-tricks.com/more-control-over-css-borders-with-background-image/</a></p>
  <p>How can I achieve a blinking effect with a dotted border?</p>