css3 动画 - 变换：firefox 45.0 上的 scale3D答案

【问题标题】：css3 animation - transform: scale3D on firefox 45.0css3 动画 - 变换：firefox 45.0 上的 scale3D
【发布时间】：2016-06-23 13:39:03
【问题描述】：

第一篇文章在这里。我正在尝试通过变换 scale3D 使图像（例如红色背景）挤压和拉伸，这可以工作，但不适用于所有浏览器。我不明白为什么这个动画在 chrome(48.0) 上有效，但在 firefox(45.0) 上却不行。

感谢您的帮助:)

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();
};

#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);

  }

}

<!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>

【问题讨论】：

标签： javascript html css animation transform

【解决方案1】：

删除“-WEBKIT-”

@keyframes 壁球 { 100% {

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

【讨论】：

感谢齐夫！似乎不需要 -moz- 的供应商前缀。并且后备是使用-webkit-。