What are discrete animations?

Question

The MDN animation documentation refers to animation type being discrete. What does this mean?

Evelyn

Answer 1

Discrete animations proceed from one keyframe to the next without any interpolation.

Think of it the way you normally would think of an animation - one image to the next. Interpolation is inbetweening - filling in space between the main images (in the case of computer graphics these are found from formulas).

In traditional hand-drawn animation, the main artist would produce the keyframes, and an assistant would draw the inbetweens.

So discrete animation is like hand-drawn animation done without the inbetweens of an assistant.

Doall

What's the point of discrete? Seems basically the same as "not animatable" (given, e.g., visibility). Graphical animation since before the advent of CSS or the internet practically implies interpolation. – Trujillo

Answer 2

It means that the property is usable within animations, but it toggles the state abruptly upon any change in value i.e. the values cannot be interpolated in-between.

For comparison, there is another category of animation type in the MDN docs you mentioned which is "Not animatable". This means that the property cannot toggle from one value to other, even when defined within animations.

Take this as an example. For whatever reason you have an emoji which you want to disappear after a second on hover.

Let's try visibility: hidden; here. It works as expected.

.ball {
  visibility: visible;
}

.ball:hover {
  animation: hide 1s forwards;
}

@keyframes hide {
  to {
    visibility: hidden;
    /* display: none; */
    translate: 100px;
  }
}

<div class="ball">⚽</div>

However in this case, display: none; doesn't work at all.

.ball {
  display: block;
}

.ball:hover {
  animation: hide 1s forwards;
}

@keyframes hide {
  to {
    /* visibility: hidden; */
    display: none;
    translate: 100px;
  }
}

<div class="ball">⚽</div>

This is due to visibility being a discrete animation property and display being a non-animatable property.

Update: The second example behavior might change soon as webkit is making display property transitionable according to this announcement. But you still get the idea.

Cephalalgia

This is a great explanation of the difference between discrete and not animatable. MDN describes ALL of the the different Animation Types here in case you’re curious: developer.mozilla.org/en-US/docs/Web/CSS/… – Radiolarian