css3动画-转换：在firefox 45.0上为scale3D

Question

首先发布在这里。 我正在尝试通过transform 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>

Answer 1

删除“ -WEBKIT-”

@keyframes壁球{100％{

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

css3动画-转换：在firefox 45.0上为scale3D

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-03-09 09:25:04

css3动画-转换：在firefox 45.0上为scale3D

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-03-09 09:25:04

解决方案1
0 已采纳 2016-03-09 09:25:04