devtools/client/animationinspector/test/doc_pseudo_elements.html
author Sebastian Hengst <archaeopteryx@coole-files.de>
Thu, 11 May 2017 10:15:55 +0200
changeset 357701 e1e81b129b5b389f59ccc2144573a7c7af728a2a
parent 357699 e0f9c56c15f0f412f2111f1f3379d69b2a213188
child 357703 61f9d530898ae753cddeecc240ad1896b9b9b939
permissions -rw-r--r--
Backed out changeset e0f9c56c15f0 (bug 1362947) for linting failures, e.g. at accessible/tests/mochitest/jsat/doc_content_text.html:15. r=backout

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Animated pseudo elements</title>
    <style>
      html, body {
        margin: 0;
        height: 100%;
        width: 100%;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: flex-end;
      }

      body {
        animation: color 2s linear infinite;
        background: #333;
      }

      @keyframes color {
        to {
          filter: hue-rotate(360deg);
        }
      }

      body::before,
      body::after {
        content: "";
        flex-grow: 1;
        height: 100%;
        animation: grow 1s linear infinite alternate;
      }

      body::before {
        background: hsl(120, 80%, 80%);
      }
      body::after {
        background: hsl(240, 80%, 80%);
        animation-delay: -.5s;
      }

      @keyframes grow {
        0% {height: 100%; animation-timing-function: ease-in-out;}
        10% {height: 80%; animation-timing-function: ease-in-out;}
        20% {height: 60%; animation-timing-function: ease-in-out;}
        30% {height: 70%; animation-timing-function: ease-in-out;}
        40% {height: 50%; animation-timing-function: ease-in-out;}
        50% {height: 30%; animation-timing-function: ease-in-out;}
        60% {height: 80%; animation-timing-function: ease-in-out;}
        70% {height: 90%; animation-timing-function: ease-in-out;}
        80% {height: 70%; animation-timing-function: ease-in-out;}
        90% {height: 60%; animation-timing-function: ease-in-out;}
        100% {height: 100%; animation-timing-function: ease-in-out;}
      }
    </style>
  </head>
  <body>
  </body>
</html>