Отрисовка 3D в FireFox

.loading { 
  position: relative; 
  height: 98px; 
  width: 68px; 
  box-sizing: border-box; 
  -webkit-transform-style: preserve-3d; 
  transform-style: preserve-3d; 
  -webkit-animation: loadingRotate 3s ease-in-out 3s infinite; 
  animation: loadingRotate 3s ease-in-out 3s infinite; 
  will-change: transform; 
} 
.loading div { 
  border: 1px solid #FF0099; 
  position: absolute; 
  box-sizing: border-box; 
  opacity: 0; 
  -webkit-transform: translateY(20px); 
  transform: translateY(20px); 
} 
.loading .art1 { 
  width: 20px; 
  height: 40px; 
  top: 0; 
  left: 0; 
} 
.loading .art3 { 
  width: 20px; 
  height: 30px; 
  top: 0; 
  left: 24px; 
} 
.loading .art2 { 
  width: 20px; 
  height: 20px; 
  top: 0; 
  left: 48px; 
} 
.loading .art5 { 
  width: 20px; 
  height: 20px; 
  top: 44px; 
  left: 0; 
} 
.loading .art6 { 
  width: 20px; 
  height: 34px; 
  top: 34px; 
  left: 24px; 
} 
.loading .art4 { 
  width: 20px; 
  height: 30px; 
  top: 24px; 
  left: 48px; 
} 
.loading .art7 { 
  width: 20px; 
  height: 30px; 
  top: 68px; 
  left: 0; 
} 
.loading .art8 { 
  width: 20px; 
  height: 26px; 
  top: 72px; 
  left: 24px; 
} 
.loading .art9 { 
  width: 20px; 
  height: 40px; 
  top: 58px; 
  left: 48px; 
} 
.loading .art1 { 
  -webkit-animation: loadingArts 0.4s ease-in-out 0.25s forwards; 
  animation: loadingArts 0.4s ease-in-out 0.25s forwards; 
} 
.loading .art2 { 
  -webkit-animation: loadingArts 0.4s ease-in-out 0.5s forwards; 
  animation: loadingArts 0.4s ease-in-out 0.5s forwards; 
} 
.loading .art3 { 
  -webkit-animation: loadingArts 0.4s ease-in-out 0.75s forwards; 
  animation: loadingArts 0.4s ease-in-out 0.75s forwards; 
} 
.loading .art4 { 
  -webkit-animation: loadingArts 0.4s ease-in-out 1s forwards; 
  animation: loadingArts 0.4s ease-in-out 1s forwards; 
} 
.loading .art5 { 
  -webkit-animation: loadingArts 0.4s ease-in-out 1.25s forwards; 
  animation: loadingArts 0.4s ease-in-out 1.25s forwards; 
} 
.loading .art6 { 
  -webkit-animation: loadingArts 0.4s ease-in-out 1.5s forwards; 
  animation: loadingArts 0.4s ease-in-out 1.5s forwards; 
} 
.loading .art7 { 
  -webkit-animation: loadingArts 0.4s ease-in-out 1.75s forwards; 
  animation: loadingArts 0.4s ease-in-out 1.75s forwards; 
} 
.loading .art8 { 
  -webkit-animation: loadingArts 0.4s ease-in-out 2s forwards; 
  animation: loadingArts 0.4s ease-in-out 2s forwards; 
} 
.loading .art9 { 
  -webkit-animation: loadingArts 0.4s ease-in-out 2.25s forwards; 
  animation: loadingArts 0.4s ease-in-out 2.25s forwards; 
} 
@-webkit-keyframes loadingArts { 
  to { 
    -webkit-transform: translateY(0px); 
    transform: translateY(0px); 
    opacity: 1; 
  } 
} 
@keyframes loadingArts { 
  to { 
    -webkit-transform: translateY(0px); 
    transform: translateY(0px); 
    opacity: 1; 
  } 
} 
@-webkit-keyframes loadingRotate { 
  to { 
    -webkit-transform: translateZ(0) rotateY(360deg); 
    transform: translateZ(0) rotateY(360deg); 
  } 
} 
@keyframes loadingRotate { 
  to { 
    -webkit-transform: translateZ(0) rotateY(360deg); 
    transform: translateZ(0) rotateY(360deg); 
  } 
} 
html { 
  height: 100%; 
  padding: 0; 
} 
body { 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-pack: center; 
  -ms-flex-pack: center; 
  justify-content: center; 
  -webkit-box-align: center; 
  -ms-flex-align: center; 
  align-items: center; 
  height: 100%; 
  margin: 0; 
  -webkit-perspective: 300px; 
  perspective: 300px; 
}

<div class="loading"> 
  <div class="art1"></div> 
  <div class="art2"></div> 
  <div class="art3"></div> 
  <div class="art4"></div> 
  <div class="art5"></div> 
  <div class="art6"></div> 
  <div class="art7"></div> 
  <div class="art8"></div> 
  <div class="art9"></div> 
</div>