The plugin doesn’t include options to animate markers, however you can use custom CSS to add code that will create animations. This is just in example of what you can do with custom CSS.
Round Markers
Zoom level changed to 1
.imapsCircle {
paint-order: stroke;
stroke-opacity:1;
stroke: #dd9933; /* change with the stroke color you want */
animation: pulse-me 1s linear infinite;
}
/* or target by colour */
.imapsCircle-group[fill="#1e73be"] .imapsCircle {
paint-order: stroke;
stroke-opacity:1;
stroke: #dd9933; /* change with the stroke color you want */
animation: pulse-me 1s linear infinite;
}
@keyframes pulse-me {
0% {
stroke-opacity: 0.9;
stroke-width:0px;
}
100% {
stroke-opacity: 0;
stroke-width:25px;
}
}
Image Markers
Zoom level changed to 3
This is the code I used in the example above:
.imapsMapImage {
-webkit-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
animation-iteration-count: 2;
-webkit-animation-iteration-count: 2;
animation-name: bounce;
-moz-animation-name: bounce;
}
@keyframes bounce {
0%, 100%, 20%, 50%, 80% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0)
}
40% {
-webkit-transform: translateY(-30px);
-ms-transform: translateY(-30px);
transform: translateY(-30px)
}
60% {
-webkit-transform: translateY(-15px);
-ms-transform: translateY(-15px);
transform: translateY(-15px)
}
}
You can add the above code to the custom CSS field of your map.