askvity

How CSS Handles Animation

Published in CSS Animation 5 mins read

Adding animation to a website primarily involves using Cascading Style Sheets (CSS) to animate HTML elements. While HTML provides the structure, CSS provides the styling and animation logic.

To add animation to your website:

  1. Define the Animation: Use the @keyframes CSS rule to create the sequence of animation styles.
  2. Apply the Animation: Target the specific HTML element you want to animate using a CSS selector and attach the defined @keyframes animation using CSS animation properties, particularly animation-name.

HTML elements serve as the content structure that you want to bring to life. CSS is the language that dictates how these elements should look and behave over time, making them move, change color, or transform.

Defining the Animation with @keyframes

The @keyframes rule is where you define the various stages, or keyframes, of your animation. You give your animation a unique name (e.g., slideIn, pulse, fadeIn). Inside the @keyframes block, you specify styles at different points in the animation sequence. These points are typically defined using percentages (0% being the start, 100% being the end) or the keywords from (equivalent to 0%) and to (equivalent to 100%).

Example @keyframes structure:

@keyframes mySimpleAnimation {
  0% {
    opacity: 0; /* Start fully transparent */
  }
  50% {
    opacity: 0.5; /* Halfway point */
  }
  100% {
    opacity: 1; /* End fully visible */
  }
}

Applying the Animation to HTML Elements

Once your animation is defined with @keyframes, you need to tell specific HTML elements to use it. This is done within a standard CSS rule that targets the desired element(s) using selectors (like class names, IDs, or element types).

To apply the animation you define with @keyframes to specific HTML elements, you use the animation-name property within a CSS selector, referencing the name of the keyframes you defined with @keyframes. This property effectively binds the animation to the selected elements.

Example CSS rule applying the animation:

.my-animated-element {
  animation-name: mySimpleAnimation; /* Link to the @keyframes rule name */
  animation-duration: 2s;           /* How long the animation takes */
  animation-timing-function: ease;  /* Speed curve of the animation */
  animation-iteration-count: infinite; /* How many times it repeats */
}

Here, any HTML element with the class my-animated-element will now perform the mySimpleAnimation over 2 seconds, repeating infinitely.

Key Animation Properties

While animation-name is essential for linking the animation, several other CSS properties control its behavior. You can apply these individually or using the animation shorthand property.

Here are some common animation properties:

  • animation-name: Specifies the name of the @keyframes rule to use.
  • animation-duration: Sets the length of time an animation should take to complete one cycle (e.g., 2s, 500ms).
  • animation-timing-function: Defines the speed curve of the animation (e.g., ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier()).
  • animation-delay: Specifies a delay before the animation starts (e.g., 1s, 300ms).
  • animation-iteration-count: Specifies the number of times an animation should repeat (e.g., 2, infinite).
  • animation-direction: Specifies whether the animation should play forwards, backwards, or alternate between the two (e.g., normal, reverse, alternate, alternate-reverse).
  • animation-fill-mode: Specifies a style for the target element when the animation is not playing (before it starts, after it ends, or both) (e.g., none, forwards, backwards, both).
  • animation-play-state: Specifies whether the animation is running or paused (e.g., running, paused).
  • animation: A shorthand property that combines multiple animation properties into one declaration.

Using these properties allows you to fine-tune how your animation looks and feels.

Simple Code Example

Let's create a simple HTML element and make it slide in using CSS animation.

HTML (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Element</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="slide-in-box">
        Hello, I'm animated!
    </div>

</body>
</html>

CSS (style.css):

/* Define the animation stages */
@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%); /* Start off the screen to the left */
    opacity: 0;
  }
  100% {
    transform: translateX(0);    /* End at its normal position */
    opacity: 1;
  }
}

/* Apply the animation to the element */
.slide-in-box {
  width: 200px;
  padding: 20px;
  background-color: lightblue;
  margin-top: 50px; /* Add some space */

  /* --- Animation Properties --- */
  animation-name: slideInFromLeft;  /* Which @keyframes to use */
  animation-duration: 1.5s;        /* How long it takes */
  animation-timing-function: ease-out; /* Animation speed curve */
  animation-delay: 0.5s;           /* Wait half a second before starting */
  animation-iteration-count: 1;    /* Play once */
  animation-fill-mode: forwards;   /* Stay at the end state */
}

In this example, the @keyframes slideInFromLeft rule defines the starting and ending points of the animation. The CSS rule for .slide-in-box then applies this animation using animation-name, setting its duration, timing, delay, and other properties.

By mastering @keyframes and the animation properties, you can create a wide range of engaging visual effects on your website elements.

Learn More

For detailed documentation on CSS animations and all their properties, you can refer to resources like the MDN Web Docs.

Related Articles