DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Syntax
Top
Top

Posted on • Updated on

Syntax

The main idea with a CSS keyframe animation is that it'll interpolate between different chunks of CSS.

For example, here we define a keyframe animation that will smoothly ramp an element's horizontal position from -100% to 0%:

@keyframes slide-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0%);
  }
}
Enter fullscreen mode Exit fullscreen mode

Each @keyframes statement needs a name! In this case, we've chosen to name it slide-in. You can think of this like a global variable.*

Keyframe animations are meant to be general and reusable. We can apply them to specific selectors with the animationproperty:

<style>
  /* Create the animation... */
  @keyframes slide-in {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(0%);
    }
  }

  /* ...and then apply it: */
  .box {
    animation: slide-in 1000ms;
  }
</style>

<div class="box">
  Hello World
</div>
Enter fullscreen mode Exit fullscreen mode

(To re-run the animation, refresh the β€œResult” pane by clicking the icon.)

As with the transition property, animation requires a duration. Here we've said that the animation should last 1 second (1000ms).

The browser will interpolate the declarations within our from and to blocks, over the duration specified. This happens immediately, as soon as the property is set.

We can animate multiple properties in the same animation declaration. Here's a fancier example that changes multiple properties:

<style>
  @keyframes drop-in {
    from {
      transform:
        rotate(-30deg) translateY(-100%);
      opacity: 0;
    }
    to {
      transform:
        rotate(0deg) translateY(0%);
      opacity: 1;
    }
  }

  .box {
    animation: drop-in 1000ms;
  }
</style>

<div class="box">
  Hello World
</div>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

DEV has this feature:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›