CSS Transitions for SVG Elements
CSS transitions enable gradual changes in SVG properties over a specified duration. They are ideal for simple animations like hover effects or state transitions. Let's start with an example of scaling an SVG circle on hover:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.circle {
fill: blue;
transition: transform 0.3s ease;
}
.circle:hover {
transform: scale(1.5);
}
</style>
</head>
<body>
<svg width="100" height="100">
<circle class="circle" cx="50" cy="50" r="30" />
</svg>
</body>
</html>
In this example, when you hover over the circle, it scales up smoothly due to the CSS transition on the transform property. You can apply transitions to various SVG properties like fill, stroke, opacity, etc., creating subtle yet effective animations.
Keyframe Animations for SVG Elements
Keyframe animations offer more advanced and complex animations by defining keyframes with specific styles at different percentages of the animation's duration. Let's create a rotating SVG square using keyframes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.square {
fill: yellow;
animation: rotate 4s linear infinite;
}
</style>
</head>
<body>
<svg width="100" height="100">
<rect class="square" x="20" y="20" width="60" height="60" />
</svg>
</body>
</html>
In this example, the square rotates continuously in a clockwise direction using the @keyframes rule defining rotation from 0 to 360 degrees. The animation is applied using the animation property with a duration of 4 seconds, a linear timing function, and an infinite loop.
Combining Transitions and Keyframes
You can combine transitions and keyframe animations to create more complex effects. For instance, let's animate a path's stroke width and color using transitions, and its movement using keyframes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.path {
stroke: red;
stroke-width: 2;
fill: none;
transition: stroke-width 0.3s ease, stroke 0.3s ease;
animation: movePath 2s linear infinite;
}
@keyframes movePath {
0% { transform: translateX(0px); }
50% { transform: translateX(100px); }
100% { transform: translateX(0px); }
}
.path:hover {
stroke-width: 5;
stroke: blue;
}
</style>
</head>
<body>
<svg width="200" height="100">
<path class="path" d="M20,50 L180,50" />
</svg>
</body>
</html>
In this example, the path moves back and forth horizontally using keyframes (movePath) while its stroke width and color change smoothly on hover due to transitions.
Benefits of CSS Animations for SVG
- Performance: CSS animations leverage hardware acceleration for smooth performance.
- Ease of Use: They are easy to implement and control using CSS rules.
- Interactivity: Animations can respond to user actions like hover or click events.
- Compatibility: Most modern browsers support CSS animations for SVG.
- Considerations
- Browser Support: Ensure compatibility with older browsers by providing fallbacks or using polyfills.
- Performance: Avoid overly complex animations that may cause performance issues on low-powered devices.
Practice Excercise Practice now