第一篇文章在这里。 我正在尝试通过变换scale3D 来压缩和拉伸(stretch)图像(例如红色背景)，该方法可以工作，但不适用于所有浏览器。 我不明白为什么这个动画在 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>最佳答案
删除“-WEBKIT-”
@keyframes 挤压 { 100%{
transform: scale3D(1.03, 0.95, 10);
}
}
关于javascript - CSS3动画-变换: scale3D on firefox 45. 0，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35887203/