CSS animations

Animations in CSS

CSS animations are a way to add movement and interactivity to elements on a web page. With them, you can create amazing visual effects and bring static layout elements to life.

CSS properties for animations

To create animations in CSS, you need to use some specific properties. The main ones are:

• @keyframes: defines the animation itself, specifying the initial and final states of the elements;
• animation-name: defines the name of the animation;
• animation-duration: sets the duration of the animation;
• animation-timing-function: defines the type of animation, such as linear, ease-in, ease-out, ease-in-out, among others;
• animation-delay: sets the delay time before the animation starts;
• animation-iteration-count: defines the number of times the animation will be played;
• animation-direction: defines the animation direction, such as normal, reverse, alternate, alternate-reverse, among others.

CSS animation example

Let's create a simple CSS animation example to better understand how it works:

  
    /* Defining the animation */
    @keyframes move {
      0% { transform: translateX(0); }
      50% { transform: translateX(50px); }
      100% { transform: translateX(0); }
    }

    /* Applying the animation */
    .element {
      animation-name: move;
      animation-duration: 2s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
    }
  

In this example, we create an animation called "move" that causes an element to move to the right and back to its starting position. For that, we use the transform: translateX() property to change the horizontal position of the element.

We then apply animation to the element using the animation-name, animation-duration, animation-timing-function and animation-iteration-count properties.

Conclusion

CSS animations are a great way to add interactivity and dynamism to web pages. With the right properties and a little creativity, you can create amazing effects that will blow your mind.

Next page of the Free Ebook:

26Transitions in CSS

3 minutes