Timeline-based animation using keyframes

Simple animations can really delight your users. Here’s how I implanted a simple animation on the initial page load using Key Frames and CSS transforms:


https://laurosilva.comimage

Keyframes animation allows you to control as many properties as you want between 0% to 100% . CSS transforms allows you to translate, scale or rotate your elements.

The code:

@keyframes AwesomeAnimation {
  0% {
      opacity: 0;
      transform: translateY(30px)
  }
  100% {
      opacity: 1;
      transform: translateY(0px)
  }
}

Calling the animation:

h1 {
  animation: AwesomeAnimation 3s 0.1s forwards cubic-bezier(0.2, 0.8, 0.2, 1);
  opacity: 0;
}

Start with initial values like 0 opacity, then use animation-fill-mode: forwards to make sure that the animation doesn’t reset to those initial values. Using duration and delay is key to achieving a unique, well-thought-out effect. And that’s it!

What’s your favorite technique to add animations?

2 Likes

That animation looks great!

I was just going to do a blog post on CSS keyframes!

Great simple breakdown @laurosilva!

1 Like