CSS Animations test: multiple keyframes, shorthand

dabblet.css

/* CSS Animations test: multiple keyframes, shorthand */
.box {
  width: 250px;
  height: 80px;
  margin: 24px;
  border: 5px solid #999;
  border-radius: 5px;
  padding: 3px;
}
@keyframes multiple {
  33.3% {background-color: hsl(0,80%,80%);}
  66.7% {background-color: hsl(180,80%,80%);}
  }
@keyframes size {50% {font-size: 200%;}}
.wrapper:hover .multiple {animation: multiple 5s linear;}
.wrapper:hover .size {
  animation-name: multiple, size;
  animation-duration: 5s;
  animation-timing-function: linear;
}
.wrapper:hover .both {animation: multiple 5s linear, size 5s linear;}

dabblet.html

<div class="wrapper">
  <div class="box multiple">multiple</div>
  <div class="box multiple size">multiple, size (individual)</div><!-- testing class overwriting -->
  <div class="box both">multiple, size (shorthand)</div>
</div>

settings.json

{"version":"1.1","settings":{"prefixfree":"1"},"view":[{"template":"r\nc","active":true,"seethrough":false},{"template":"r\nh","active":false,"seethrough":false},{"template":"r\nch","active":false,"seethrough":false}]}