SMIL Animation: animateTransform
While the <animate> tag is great for basic attributes, transformations (like rotating, scaling, or moving) requires a specialized tag: <animateTransform>.
This tag targets the transform attribute of an element and specifies exactly what kind of transformation is being applied.
The type Attribute
Unlike standard animations, you must specify a type attribute to tell the browser which transformation function to use. Common types include:
rotate: Rotates the element. The value consists ofangle [centerX centerY].scale: Changes the size. Values can be a single number (uniform scale) or two numbers (x and y scale).translate: Moves the element. The value consists ofx [y]coordinates.skewX/skewY: Tilts the element along an axis.
Handling the Transformation Center
One of the handiest features of <animateTransform> for rotation is that you can specify the center of rotation directly in the from and to values. For example, from="0 50 50" means 0 degrees of rotation centered at coordinate (50, 50).
Additive Transformations
If an element already has a transformation applied, or if you want to run multiple animations at once, you use the additive="sum" attribute. This tells the browser to add the animation to the existing transformation rather than replacing it.
Example: Rotation and Scaling
In this example, the square rotates around its center, while the circle pulses using a basic scale transformation.
Creating "Smooth" Pulses with Easing
When looking at the pulsing circle in the above example, the scaling often feels "linear" and jumps back to the start abruptly. We can make this much more professional by using several advanced attributes:
values="1;2;1": Instead offrom/to, we provide a sequence. Starting at 1, increasing to 2, and returning to 1 creates a smooth round-trip animation.calcMode="spline": This tells the browser to use cubic-bezier curves for interpolation between the values.keySplines: These define the actual easing curves (similar to the CSScubic-bezier()function). In the example below, we use a "Power" or "Expo" like easing to make the pulse feel more organic.keyTimes: Defines the timing for each segment of thevalueslist (from 0 to 1).
Example: Basic vs. Improved Pulse
When looking at this example, compare the basic skyblue circle with the improved tomato-colored circle. The second one uses easing and a sequence of values to create a much more natural-feeling pulse.
Note: When using scale, the transformation happens relative to the SVG coordinate system's origin (0, 0). This is why the circles in the example above are centered at (0,0) and wrapped in a g (group) tag that is translated to (50,50) and (150,50) respectively. This ensures the scaling effect appears to pulse from the center of the shape rather than moving it diagonally.