【For people who are troublesome】 This sense of @keyframes animation

In my mind until just the other day, when I wanted to implement animation on a website,

・ Single and simple animation is CSS transition ・ Continuous complex animation is JavaScript

It was, I'm starting to feel bad that animation management is divided into two parts, CSS and JavaScript. Now I understand the merits of CSS @keyframes animation, If you remember this@keyframes you will be able to use animation.

Is @keyframes confusing? Difficult?

@keyframes animation is intuitively difficult to understand! There was a time when I was thinking like that.

For example, this code

div {
  opacity: 0;
  width: 50px;
  height: 50px;
  background: #000;
  animation-name: anime01;
  animation-duration: 2s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}

@keyframes anime01 {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  25% {
    background: #000;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    background: #f00;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    background: #f00;
    transform: scale(1.4);
  }
}

See the Pen gZMNqN by kiti-net (@kiti-net) on CodePen.

"Well, the duration of the animation is 2 seconds, and 25% of it is 0.5 seconds and translateY is 0 ... Because 50% is one second... It's confusing!" "Too many properties to set!" "@keyframe can't use it!"

I think that the person who is short on temper was bad at touching the @keyframes in the first place.

Even if you are such a person, if you basically keep the following three points in check, It makes it easy to handle @keyframes.

1. Break down the animation into smaller pieces

If you take a closer look at the animation above, you can break it down into six animations. In this case, give the animation-name a descriptive name.

@keyframes opacity_0-1 {
    0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes opacity_1-0 {
    0% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes translateY_0-50 {
    0% { transform: translateY(0); }
  100% { transform: translateY(50px); }
}

@keyframes translateY_50-0 {
    0% { transform: translateY(50px); }
  100% { transform: translateY(0); }
}

@keyframes bg_black-red {
    0% { background: #000; }
  100% { background: #f00; }
}

@keyframes scale_1-14 {
    0% { transform: scale(1); }
  100% { transform: scale(1.4); }
}

2. 5 properties to remember

Properties are basically shorthanded, and it is OK to remember them in the following form. Also, don't forget that you can specify multiple animations separated by commas.

div {
  animation:
    anime01 2s ease 0s forwards,
    anime02 2s ease-out 1s forwards;
}
// name, duration, timing-function, delay, fill-mode

name: @keyframes name Example) opacity_0-1

duration: duration of the animation 0.5s = 0.5 seconds 1s = 1 second

timing-function: easing ease linear ease-in ease-out cubic-bezier() Select from

delay: The amount of time to delay the start of the animation 0.5s = 0.5 seconds 1s = 1 second

fill-mode: Sets how the style is applied to the object before and after the animation runs. Basically OK with forwards (preserves style after animation)

3. Assemble the disassembled @keyframes

Adjust the values of duration and delay to assemble a continuous animation. It is easy to set the easing etc. individually.

div {
  animation:
    translateY_0-50 0s ease 0s forwards,
    opacity_0-1 0.5s ease 0s forwards,
    translateY_50-0 0.5s ease 0s forwards,
    bg_black-red  0.5s ease 0.5s forwards,
    opacity_1-0  1s ease-out 1s forwards,
    scale_1-14  1s ease-out 1s forwards;
}

See the Pen roMBXx by kiti-net (@kiti-net) on CodePen.

caution

Note that if you specify an animation of the same property at the same time, it will be overwritten by the value executed later. If you want to do a transform such as scale and translate at the same time, prepare a dedicated @keyframes.

// NG
div {
  animation:
    translateY_50-0 1s ease 0s forwards,
    scale_1-14  1s ease 0s forwards;
}

// OK
div {
  animation: scale_1-14_translateY_50-0 1s ease-out 0s forwards;
}

@keyframes scale_1-14_translateY_50-0 {
  0% {
    transform: scale(1) translateY(50);
  }
  100% {
    transform: scale(1.4) translateY(0);
  }
}

Summary

When creating complex animations, By making and assembling a lot of small keyframes of 0% to 100%, You will be able to create animations intuitively.

Because there is little to remember, I would like to ask those who are trying to learn @keyframes from now on, and those who are frustrated by the @keyframes trouble.

To implement an animation on your website, ・ Single and simple animation is CSS transition ・ Continuous complex animation is CSS @keyframes

When it comes to controlling animated firing, that's another story.