thimbleprojects.org - Fox's hat doesn't rotate on X axis

[am97]

URL: https://thimbleprojects.org/mozillalearning/213517/

Browser / Version: Firefox 62.0
Operating System: Fedora
Tested Another Browser: Yes

Problem type: Something else
Description: Issue with CSS animation
Steps to Reproduce:
Hover the cursor over the Fox's hat. The hat moves up and disappears. It should instead make a 360° flip.

The issue persists even in a fresh Firefox installation. (It works in chromium 69.0.3497.100)

From webcompat.com with ❤️

[adamopenweb]

Thanks for the report @am97. I can reproduce as well, doesn't work in Safari either. But is fine in Chrome.

Tested in:
Firefox 64 for MacOS & Linux, Chrome for MacOS & Linux, Safari for MacOS

[karlcow]

The animation is defined in https://thimbleprojects.org/mozillalearning/213517/animation.css
with

.fox:hover .hat {
  animation-name: tip;                /* animation name */
  animation-duration: 2s;             /* how long it lasts */
  animation-delay: 0s;                /* dely before starting */
  animation-iteration-count: 3;       /* how many times to play it */
  animation-timing-function: linear;  /* easing style */
  animation-fill-mode: backwards;     /* apply beginning or end styles when it's over */
  animation-direction: normal;        /* direction it plays in */
}

.hat {
  transform-origin: center;     /* trasformations are applied from these cooridnates on the hat */
}

/* 
These are the keyframes in the hat tip animation.
Each keyframe includes a percentage and any number of css rules.
*/

@keyframes tip {
  0% {
    /* You can add more rules to each keyframe */
  }
  25% {
    transform: translateY(-100px) rotate(0deg);
  }
  50% {
    transform: translateY(-100px) rotateX(360deg);
  }
  100% {
    transform: translateY(0px) rotate(360deg);
  }
}

/* You can 

And indeed the hat disappears instead of rotating.

[karlcow]

Close as duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=1500820

[karlcow]

Duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=1500820