gecko-dev/browser/devtools/styleinspector/test/doc_keyframeanimation.css

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

.box {
  height: 50px;
  width: 50px;
}

.circle {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background-color: #FFCB01;
}

#pacman {
  width: 0px;
  height: 0px;
  border-right: 60px solid transparent;
  border-top: 60px solid #FFCB01;
  border-left: 60px solid #FFCB01;
  border-bottom: 60px solid #FFCB01;
  border-top-left-radius: 60px;
  border-bottom-left-radius: 60px;
  border-top-right-radius: 60px;
  border-bottom-right-radius: 60px;
  top: 120px;
  left: 150px;
  position: absolute;
  animation-name: pacman;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-duration: 15s;
}

#boxy {
  top: 170px;
  left: 450px;
  position: absolute;
  animation: 4s linear 0s normal none infinite boxy;
}


#moxy {
  animation-name: moxy, boxy;
  animation-delay: 3.5s;
  animation-duration: 2s;
  top: 170px;
  left: 650px;
  position: absolute;
}

@-moz-keyframes pacman {
  100% {
    left: 750px;
  }
}

@keyframes pacman {
  100% {
    left: 750px;
  }
}

@keyframes boxy {
  10% {
    background-color: blue;
  }

  20% {
    background-color: green;
  }

  100% {
    opacity: 0;
  }
}

@keyframes moxy {
  to {
    opacity: 0;
  }
}