Duplicated CSS @keyframes properties are valid

I'm not a big @keyframes user because I'm not good at manually creating animations. Trust me — I tried to become an animation virtuoso, but my animations failed to deliver the UI delight I imagined. So, I accepted my destiny and stopped looking into complex @keyframes animations.

But apparently I'm missing out on some things. Here's Ryan with some @keyframes facts:

• CSS is cool with duplicate keyframe properties
• CSS allows the keyframe properties to have a random order
• CSS can apply custom easings for each keyframe ruleset

All these facts can be valuable, but the first one will even make it into my animation amateur toolbox.

Here's Ryan's first example:

@keyframes animate {
  0% {
    background-color: red;
    scale: 0.5;
    translate: 0 100%;
  }
  50% {
    background-color: red;
    scale: 0.5;
  }
  100% {
    background-color: green;
    scale: 1;
    translate: 0 0;
  }
}

While this code isn't terrible, the duplicated background-color and scale declarations aren't great. Duplicated keyframe properties help keep things DRY.

@keyframes animate {
  0% {
    translate: 0 100%;
  }
  /* 
    Apply the background and scale from 0% to 50% 
    without duplicating the values 👇
  */
  0%, 50% {
    background-color: red;
    scale: 0.5;
  }
  100% {
    background-color: green;
    scale: 1;
    translate: 0 0;
  }
}

TIL, and thanks, Ryan!