/* fallingtitle.css -- animates the title with class="fallingTitleAnimation" */
/*   July 11, 2020 */
/*   see: https://www.smashingmagazine.com/2011/05/an-introduction-to-css3-keyframe-animations/ */

/* this file has two animations: only the second ".hingeZoomAnimation" works. */

/*  the animation occurs in two parts: 1) title swings and falls; 2) title zooms in;
    the animation is specified in shorthand;
    the first line: "hinge 2s 2s both," is short for:
      animation-name: hinge;
      animation-delay: 2s;
      animation-duration: 2s;
      animation-fill-mode: both;
        [how an animation applies styles before and after execution;
         "none" no styles; returns to starting position;
         "forwards" retains styles from last keyframe position;
         "backwards" styles from first keyframe position during delay;
         "both" => both!
      see: https://www.sitepoint.com/understanding-css-animation-fill-mode-property/
*/
.fallingTitleAnimation { /* this does not work: Chrome says "invalid property value" */
  animation:
    hinge 2s 2s both,
    zoomIn 1.5s ease-in-out 4.5s forward;
}
@keyframes hinge {
  0% {
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }

  20%,
  60% {
    transform: rotate3d(0, 0, 1, 80deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }

  40%,
  80% {
    transform: rotate3d(0, 0, 1, 60deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}
@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale3d(.3, .3, .3)
  }
  50% {
    opacity: 1
  }
}

/* the ".hingeZoomAnimation" -- combined into one set of keyframes */
.hingeZoomAnimation {
  animation-name: hinge-zoom;
  animation-delay: 2s;
  animation-duration: 4s;
  /* default (none) is to return to start position;
     forward means to stop at final position */
  animation-fill-mode: both;
}
@keyframes hinge-zoom {
  0% {
    transform-origin: top left;
    animation-timing-function: ease-in-out
  }
  10%,
  30% {
    transform: rotate3d(0, 0, 1, 80deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out
  }
  20%,
  40% {
    transform: rotate3d(0, 0, 1, 60deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
    opacity: 1
  }
  50% {
    transform: translate3d(0, 700px, 0);
    opacity: 0
  }
  75% {
    opacity: 0;
    transform: scale3d(.3, .3, .3)
  }
  100% {
    opacity: 1
  }
}