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.

Now answer the exercise about the content:

_What is the CSS property that defines the duration of the animation?

You are right! Congratulations, now go to the next page

You missed! Try again.

Article image Transitions in CSS

Next page of the Free Ebook:

26Transitions in CSS

3 minutes

Obtenez votre certificat pour ce cours gratuitement ! en téléchargeant lapplication Cursa et en lisant lebook qui sy trouve. Disponible sur Google Play ou App Store !

Get it on Google Play Get it on App Store

+ 6.5 million
students

Free and Valid
Certificate with QR Code

48 thousand free
exercises

4.8/5 rating in
app stores

Free courses in
video, audio and text