Summary
Highlights
This tutorial introduces CSS animations, explaining how they allow you to animate HTML elements using CSS properties, such as changing colors or moving objects. The example starts with a simple pink div.
To create an animation, you use the `@keyframes` rule, giving it a name (e.g., `change color`). Inside, you define `from` and `to` states for CSS properties, like changing the background color from salmon to light blue. The animation is then applied to a div using `animation-name` and `animation-duration`.
The `animation-iteration-count` property allows you to specify how many times an animation should run. You can set it to a numerical value (e.g., `3`) for a specific number of repetitions or `infinite` for continuous looping.
Instead of `from` and `to`, you can use percentages (e.g., `0%`, `10%`, `20%`) within `@keyframes` to define more complex animations with multiple intermediate states. This allows for a sequence of changes, creating effects like a rainbow color shift.
CSS animations are not limited to color. You can animate multiple properties simultaneously, such as `background-color`, `top`, and `left` to move an element across the screen while it changes color. Any CSS attribute can be animated.
The `animation-delay` property can be used to pause an animation for a specified duration before it starts. Animations can also be triggered by CSS selectors, such as using the `:hover` pseudo-class, so the animation only plays when a user hovers over the element.