I want blinking border for image mapping
I want through CSS. I want rectangular borders to blink permanently around map areas.
HTML
<img src="images/glass.png" alt="" class="img-responsive glass-image" usemap="#jazzmap"><br>
<map name="jazzmap">
<area shape="rect" coords="140,56,190,96" href="" alt="Video" title="Video" class="wp-video-popup" >
</map>
<img src="images/prices.png" alt="" class="img-responsive" usemap="#bookingmap">
<map name="bookingmap">
<area shape="rect" coords="0,150,178,185" href="#" alt="Book Now" title="Book Now" class="sg-popup-id-89">
</map>
CSS
@-webkit-keyframes blink { 50% { border-color: #F00; } }
map {
border: 1px solid #FFF ;
-webkit-animation: blink .5s step-end infinite alternate;
}
It is not showing the blinking borders in white and red alternate. Any help?