Question

首先发布在这里。我试图通过变换scale3D来制作图像（例如红色背景）压缩和拉伸，这可以起作用，但不适用于所有浏览器。我无法弄清楚为什么这个动画适用于chrome（48.0），但是在firefox（45.0）上它不是。

感谢您提供帮助：）

＆＃13;

window.onload = function() {

  function init() {
    var hand = document.getElementById('handMove');

    var pfx = ["webkit", "moz", "MS", "o", ""];

    function PrefixedEvent(element, type, callback) {
      for (var p = 0; p < pfx.length; p++) {
        if (!pfx[p]) type = type.toLowerCase();
        element.addEventListener(pfx[p] + type, callback, false);
      }
    }

    setInterval(function() {
      hand.id = "handMove";
    }, 4500);

    function AnimationListener() {
      hand.id = "handMove2";
    }



    PrefixedEvent(hand, "AnimationEnd", AnimationListener);
  }

  init();
};

＆＃13;

#monster {

  position: absolute;

  -o-filter: drop-shadow(5px -15px 10px rgba(0, 0, 0, 0.5));

  -moz-filter: drop-shadow(5px -15px 10px rgba(0, 0, 0, 0.5));

  -webkit-filter: drop-shadow(5px -15px 10px rgba(0, 0, 0, 0.5));

  filter: drop-shadow(5px -15px 10px rgba(0, 0, 0, 0.5));

  width: 150px;

  height: 188px;

  bottom: 5%;

  left: 50%;

  margin-left: -75px;

  background-size: contain;

  background-repeat: no-repeat;

  background: red;

  -o-transform-origin: bottom center;

  -moz-transform-origin: bottom center;

  -webkit-transform-origin: bottom center;

  transform-origin: bottom center;

  -o-animation: squash 0.3s ease-in-out both infinite alternate;

  -moz-animation: squash 0.3s ease-in-out both infinite alternate;

  -webkit-animation: squash 0.3s ease-in-out both infinite alternate;

  animation: squash 0.3s ease-in-out both infinite alternate;

}

-o-@keyframes squash {

  100% {

    -o-transform: scale3D(1.03, 0.95, 10);

  }

}

-moz-@keyframes squash {

  to {

    -moz-transform: scale3D(1.03, 0.95, 10);

  }

}

-webkit-@keyframes squash {

  100% {

    -webkit-transform: scale3D(1.03, 0.95, 10);

  }

}

@keyframes squash {

  100% {

    -webkit-transform: scale3D(1.03, 0.95, 10);

  }

}

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Title</title>

  <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
  <div class="wraper">
    <div id="monster"></div>
  </div>
  <script type="text/javascript" rel="script" src="main.js"></script>
</body>

</html>

＆＃13;

Answer 1

删除“-WEBKIT - ”

@keyframes squash { 100％{

    transform: scale3D(1.03, 0.95, 10);
  }
}

css3动画 - 转换：firefox 45.0上的scale3D

1 个答案: