Animated SVGs

Click and hold to shoot

Hover to prime the rocket then click and hold to watch it fly!

Hover to start the forklift then click and hold to operate it!

Hover to rev the engine then click and hold to go full throttle!

Hover over me!

The SVG icons and illustrations are added by the user (me) in back end of WP via Advanced Custom Fields. They are animated simply by targeting the SVG paths using ID’s or classes, then I use keyframes to create the animation, which is most often done with the transform CSS property. Because of this simple approach, the icons can be animated very quickly and can be activated by the user using some basic CSS pseudo classes such as :hover and :active (or can just be left to run constantly!).

Technologies Used:

HTML

CSS

PHP