[Web LA] Fill in missing keyframes in default animations

[m-bert]

Summary

This PR adds missing keyframe steps definitions in default layout animations. While they are not necessary for animations to work, I've found some problems with it while implementing withInitialValues modifier.

It turns out if you do not specify a property in initial keyframe step and then you decide to change it in next keyframe steps, it may not work.

Note

Example below was written in pure HTML and CSS on W3Schools Tryit Editor. However, since this PR is about web layout animations, it applies to them in the same manner as to animations in HTML and CSS.

Initial state

Consider this example:

#box {
  width: 100px;
  height: 100px;
  background: red;
  animation: myAnimation 2s;
}

@keyframes myAnimation {
  100% {
    opacity: 0;
    transform: rotate(5rad) scale(0);
   }
}

In this case, div with id box will perform PinwheelOut animation:

Nagranie.z.ekranu.2024-07-11.o.14.16.50.mov

Adding initial values

Now, suppose that we want to use withInitialValues modifier and add scale: 2. This will result in the following keyframe:

@keyframes myAnimation {
  0% {
    transform: scale(2);
  }
  100% {
    opacity: 0;
    transform: rotate(5rad) scale(0);
   }
}

Now the animation looks like this:

Nagranie.z.ekranu.2024-07-11.o.14.17.45.mov

This animation is broken for two reasons:

1. There is no rotation applied to the component
2. There is a moment when component simply disappears, instead of smoothly changing opacity from 1 to 0

Filling remaining properties

Now, if we fill in remaining keyframe properties, it will look like this:

@keyframes myAnimation {
  0% {
    opacity: 1;
    transform: rotate(0rad) scale(2);
  }
  100% {
    opacity: 0;
    transform: rotate(5rad) scale(0);
   }
}

And the resulting animation looks like this:

Nagranie.z.ekranu.2024-07-11.o.14.15.34.mov

Order of properties

Caution

Order of properties between keyframe steps does matter!

It is obvious that order of operations inside transform matters. However, it is also important to keep order of those operations between keyframes. In the example above, if we switch rotation with scale like this:

@keyframes myAnimation {
  0% {
    opacity: 1;
    transform: scale(2) rotate(0rad);
  }
  100% {
    opacity: 0;
    transform: rotate(5rad) scale(0);
   }
}

The animation will look like this:

Nagranie.z.ekranu.2024-07-11.o.14.23.15.mov

So even though all properties were provided, we still do not get proper animation.

Potential issues

Problem described in the Order of properties paragraph may lead to some problems, since layout animations on web are created dynamically from objects that contain keyframe description. While mixing order of keyframe steps doesn't change anything (you can for example specify to before from and it will work correctly), order inside transform does matter. This may be problematic because we are iterating over objects using Object.entries method. However, up to this point, no issues were reported.

Test plan

Tested on Default Layout Animations example.

[piaskowyk]

luks 👍