Animation utilities - initial state

[lewishowles]

For the longest time I've had animation classes, such as:

.animate {
  animation-duration:0.5s;
  animation-fill-mode:forwards;
  animation-iteration-count:1;
  animation-timing-function:ease-out;
}

.fade-in {
  animation-name:fadeIn;
  opacity:0;
}

@keyframes fadeIn {
  100% {
    opacity:1;
  }
}

and these were composed together to allow things like animate fade-in.

Today I thought I might as well move these into my tailwind config to allow responsive and motion safe variants.

The problem with the fade in animations in particular is that they need an initial state of opacity:0, as a 0% keyframe doesn't provide that properly.

Other than manually adding initial state classes, which would need the same motion prefixes so that they only apply if the animation does, such as motion-safe:opacity-0 motion-safe:animate-fade-in, has anyone come up with a better solution to providing initial state to animations?