Contact

contact

Title

CSS SVG animation

description

Use a single SVG image file to apply different animations, to move only parts of the image

Published 2022-09-14

Modified 2022-09-23

content

				
					/* give the group an ID or class in the SVG file to target the animation */
g#sitting_skater {animation:floatingskater 2s ease infinite;}

@keyframes floatingskater {
 0%, 100% {transform:translateX(6px) rotate(-.2deg);}
 50% {transform:translateX(-6px) rotate(.2deg);}
}
svg {overflow:visible;width:100%;}
Elementor HTML Widget with full SVG code as image:

Sources & References