Master CSS Basic Animation Concepts

CSS animations are like magic tricks that make websites more dynamic and engaging. By using animations, you can easily move your website elements, change their colors, and smoothly adjust their size to make them visually appealing.

To get started with CSS animations, you need to understand two essential components:

• @ keyframes: The blueprint for animations.

• Animation properties: The settings that control animations.

@ keyframes

@ keyframes are type of a roadmap for animation, in which, you define the start and end points of the animation and the steps between the animation.

That means, this part defines how the animation should start, how it should behave in between, and how the animation should end.

Syntax:

@keyframes animationName {
  from {
    /* Starting style */
  }
  to {
    /* Ending style */
  }
}

For example:

@keyframes fadeIn {
  from {
    opacity: 0; /* Invisible */
  }
  to {
    opacity: 1; /* Visible */
  }
}

In this example, the opacity of the element will start from 0 and will go to 1.

Before we move on, check out this eBook that will make you a pro in CSS Animations:
📚 CSS Animation Essentials: Best Practices, Techniques, and Performance Tips

From simple fades to complex animations, this eBook covers everything you need to master CSS animations, including:

• Timing functions

• Keyframes & animation flow

• Performance optimization

• Real-world applications

Ideal for developers looking to create smooth CSS animations. Grab your copy now!

Animation Properties

To customize, CSS animations different properties are used and each property has its own role which defines the behavior of the animation.

Animation properties are applied directly to an element, which defines the name, duration, delay, direction etc. of the animation.

Syntax:

.element {
  animation-name: fadeIn; /* name of the animation or @keyframes */
  animation-duration: 2s; /* duration of the animation */
}

For example:

.box {
   height: 100px;
   width: 100px;
   background-color: rgb(44, 117, 117);
   animation-name: fadeIn;  /* Name of the animation */
   animation-duration: 2s; /* Animation duration */
}
@keyframes fadeIn {
   from {
     opacity: 0; /* Invisible */
   }
   to {
     opacity: 1; /* Visible */
   }
}

In this example, the element with the class name “box” will be invisible in the starting and after two seconds it will be visible, giving a smooth fade in effect.

In CSS, you have the following animation properties:

• animation-name

• animation-duration

• animation-timing-function

• animation-delay

• animation-iteration-count

• animation-direction

• animation-fill-mode

• animation-play-state

Check out this blog to learn about each property in detail:

Animations Cheat Sheet

I’ve created a comprehensive CSS Animation Cheat Sheet that covers all the key concepts, properties, and syntax used in CSS animations.

You can download the cheat sheet on GitHub by clicking the link below:

https://github.com/WebdevShefali/CheatSheets

That’s all for today.

For more daily content, connect with me on X(Twitter).

Thank you,

Shefali