CSS Animations

Adding Motion and Interactivity to Your Web Pages With animations, you can define multiple keyframes, making it possible to transition betweenmultiple states. This allows you to create engaging effects like bouncing buttons, fading in elements, or even entire motion sequences for web page components.

Here’s how you can implement animations using various properties and the @keyframes rule.

@keyframes

The @keyframes rule defines the intermediate steps in an animation sequence. It allows you to create complex animations by specifying what should happen at different percentages (or keyframes) of the animation duration.

Syntax:

@keyframes animationName { 0% { transform: translateX(0); } 50% { transform: translateX(100px); } 100% { transform: translateX(0); } }

In this example, the element moves 100px to the right at 50% of the animation and then returns to its original position by the end.

animation-name

The animation-name property specifies which @keyframes animation should be applied to the element.

Example

.box { animation-name: moveRight; }

In this case, the animation called moveRight (defined by @keyframes) will be applied to the element with the class box.

animation-duration

The animation-duration property defines how long the animation will take to complete one cycle.

Example:

.box { animation-name: moveRight; animation-duration: 3s; }

This means the animation will take 3 seconds to complete.

animation-delay

The animation-delay property specifies when the animation should start after the page has loaded or the event has been triggered.

Example:

.box { animation-name: moveRight; animation-duration: 3s; animation-delay: 2s; /* Starts after 2 seconds */ }

In this case, the animation will start 2 seconds after the page loads or the event triggers.

animation-iteration-count

This property controls how many times the animation will repeat. By default, it is set to 1, but you can use values like infinite for continuous animations.

Example:

.box { animation-name: moveRight; animation-duration: 3s; animation-iteration-count: infinite; }

Here, the animation will repeat endlessly.

animation-direction

The animation-direction property specifies whether the animation should reverse on alternate cycles. The possible values include:

normal: Animation plays forwards each time (default).
reverse: Animation plays backwards each time.
alternate: Animation alternates direction on each cycle.
alternate-reverse: The animation plays backward on the first cycle, then alternates.

Example:

.box { animation-name: moveRight; animation-duration: 3s; animation-iteration-count: infinite; animation-direction: alternate; }

In this case, the animation will move forward on the first cycle and then reverse on the second, alternating in this manner indefinitely.

animation-timing-function

The animation-timing-function property controls the speed curve of the animation, similar to transitions. Values include:

ease-in: Starts slow and speeds up.
ease-out: Starts fast and slows down.
linear: Moves at a constant speed.
ease-in-out: Starts and ends slowly but moves faster in the middle.

Syntax:

.box { animation-name: moveRight; animation-duration: 3s; animation-timing-function: ease-in-out; }

Here, the animation will start and end slowly but move faster in the middle of the cycle.

animation-fill-mode

This property specifies how the element should behave before the animation starts and after it ends.

Possible values:

none: The element does not retain the animated styles after the animation ends (default).
forwards: The element retains the styles from the last keyframe after the animation ends.
backwards: The element applies the first keyframe styles during the delay period.
both: Applies both forwards and backwards rules.

.box { animation-name: moveRight; animation-duration: 3s; animation-fill-mode: forwards; }

In this case, the element will retain the final position it reaches after the animation ends.

animation

The animation property is shorthand for setting all the animation properties at once, except @keyframes. It allows you to write the entire animation declaration in a single line.

Syntax:

.box { animation: moveRight 3s ease-in-out 2s infinite alternate; }

In this shorthand example, the element will:

Apply the moveRight keyframes.
Run the animation for 3 seconds.
Use the ease-in-out timing function.
Delay the start by 2 seconds.
Run the animation infinitely.
Alternate directions after each cycle.

Conclusion

Congratulations! You’ve now unlocked the ability to animate and transform elements on your web page using CSS. From basic 2D and 3D transforms to sophisticated animations, these techniques will bring life to your designs and allow you to create dynamic, interactive user interfaces.

As web design continues to evolve, mastering CSS animations and transforms gives you the freedom to create not only aesthetically appealing but also highly functional websites. Keep experimenting, combining these properties, and applying them to real-world projects. With the power of CSS, your creativity is the only limit!

Request more information

CSS Animations