Question

<!DOCTYPE html>
<meta name="robots" content="noindex">
<html>
<head>
  <style>
    @font-face {
        font-family: fedra_sans_armdemi;
        src: url('fedrasansarm-demi.ttf');
    }
    body {
        overflow: hidden;
        text-align: center;
    }
    .bmper {
      -webkit-animation: bmp .7s normal;
      -webkit-animation-fill-mode:forwards;
      -moz-animation: bmp .7s normal;
      -moz-animation-fill-mode:forwards;
      font-size: 500px !important;
      -webkit-transform: scale(1);
      -moz-transform: scale(1)
    }
    #you_lose, .kochum {
        font-family: fedra_sans_armdemi;
        color: rgb(77, 0, 0);
        font-size: 72px;
    }
    @-webkit-keyframes bmp {
      from{
        -webkit-transform: scale(1000);
        opacity: 0;
      }
      to{
        -webkit-transform: scale(1);
        opacity: 1;
      }
    }
    @-moz-keyframes bmp {
      from{
        -moz-transform: scale(1000);
        opacity: 0;
      }
      to{
        -moz-transform: scale(1);
        opacity: 1;
      }
    }
  </style>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script>
    window.onload = function(e){
        setTimeout(function(){lose()}, 1000);
    }
    function lose() {
        document.getElementById("lose_sound").play();
        document.getElementById("you_lose").className="bmper";
    }
  </script>
</head>
<body onselectstart="return false;"><p>
<b class="kochum">New title</b><p>
<b id="you_lose" style="opacity: 0">π</b><p>
<audio src="lose_text.mp3" id="lose_sound"></audio>
</body>
</html>

这是我的代码，而且-moz-animation中的mozilla变换动画无效。我已经使用JSBin编写了然后下载它。我该怎么做才能让它发挥作用？我不知道该怎么写......

Answer 1

也许尝试关闭此

  -moz-transform: scale(1)

像这样

 -moz-transform: scale(1);

Mozilla动画-moz-transform scale无效

1 个答案: