Create Animated Hotspot Icons

Learn how to create animated icons for point hotspots. This particular animated icon will consist of to rotating bars hinged at the center.

This tutorial is adapted from our Webinar on using CSS. It’s a simple way to create rotating rectangles.

Draw a rectangle.

Add the following CSS to the Embedded Stylesheet in the Skin’s properties.

@keyframes rotation {  from {  transform: rotate(0deg);  }  to {  transform: rotate(360deg);  } }

Add this to the CSS Styles for the Rectangle: animation: rotation 2s infinite linear;. The rectangle will start to rotate.
Duplicate the Rectangle and give the new rectangle a unique ID.
In the Embedded Stylesheet, copy and paste the code block added earlier.
Chanage rotation to rotationCCW. And then, transform: rotate(-360deg); to ensure that the second rectangle spins in the opposite direction.
```
@keyframes rotationCCW {  from {  transform: rotate(0deg);  }  to {  transform: rotate(-359deg);  } } 
```
Select one of the rectangles, and change the CSS Styles to animation: rotationCCW 2s infinite linear;

Now the rectangles are rotating in opposite directions. You can explore with changing the speed or even adding easing:animation: rotationCCW 2s infinite ease-in-out;.

Create Animated Hotspot Icons

See also…