Auto-highlight image maps areas on timers (not hover)?

Question

I have a complex image map and I need to be able to "blink" each <area> on individual timers, instead of mouse hovers affecting it.

I had assumed that this would be simple with something like maphilight but I'm lacking in jQuery experience (and I'm not sure whether it will let me ignore the mouse and/or programmatically highlight the areas?)

Run the snippet below for working examples of how the areas would "blink", if using CSS animations, and an image map highlighting on mouseover. If I can't control the highlighting with CSS timed animations, is there another way?

I'm open to using something other than maphilight - hopefully using my existing map/coords? (Maybe imagemapster etc?) would be better suited?)

Any ideas are appreciated.

$.fn.maphilight.defaults = {
  fill: true,
  fillColor: '000080',
  fillOpacity: 0.90,
  stroke: false
}     
                                                 
$(function() {
  $('.things').maphilight();
});

html {
  font-family: Calibri;
  font-size: 18px;
  background-color: Plum;
}

.blinkers {
  border-radius: 50%;
  border: 4px solid black;
  font-size: 21px;
  height: 50px;
  width: 50px;
  line-height: 50px;
  padding: 22px;
  display: inline-block;
}

@keyframes blink {
 0%   { color: Snow; font-weight: 900; background-color: Navy; }
 15%  { color: Aqua; font-weight: 700; }
 100% { color: Navy; background-color: Snow; }
}

@-webkit-keyframes blink {
 0%   { color: Snow; font-weight: 900; background-color: Navy; }
 15%  { color: Aqua; font-weight: 700; }
 100% { color: Navy; background-color: Snow; }
}

.blink1 { animation: blink 2000ms infinite; -webkit-animation: blink 2000ms infinite; }
.blink2 { animation: blink 3000ms infinite; -webkit-animation: blink 3000ms infinite; }
.blink3 { animation: blink 4000ms infinite; -webkit-animation: blink 4000ms infinite; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/maphilight/1.4.0/jquery.maphilight.min.js"></script>

This is similar effect to what I need, using <b>css animations</b>:<br>

<div class="blinkers blink1">thing1</div>
<div class="blinkers blink2">thing2</div>
<div class="blinkers blink3">thing3</div>

<hr> My <b>image map</b> highlights on mouseover:<br>
<img src="https://i.imgur.com/ANKlNGd.png" class="things" usemap="#image-map">
<map name="image-map">
  <area id="thing1" href="#" coords="52,52,47"  shape="circle">
  <area id="thing2" href="#" coords="157,52,47" shape="circle">
  <area id="thing3" href="#" coords="262,52,47" shape="circle">
</map>


<hr> ...but how to get the image map <code>&lt;area></code>'s to auto-highlight on individual timers (and ignore the mouse)?