Question

我希望如此缩放图片。 Webkit工作正常，但Firefox无法运行。我拼错了什么吗？我找不到任何东西......

<!DOCTYPE html>
<html>
<head>
    <title>Zoom Hover</title>
        <style type="text/css">

    @-moz-keyframes 'zoom' {
        0%{
            height:200px;
            width:200px;
            }
        100% {
                width: 1000px;
                height: 1000px;
            }
    }

    @-webkit-keyframes 'zoom' {
        0%{
            height:200px;
            width:200px;
            }
        100% {
                width: 1000px;
                height: 1000px;
            }
    }    

img {
    width:200px;
    height:auto;

    }

img:hover {
    -moz-animation-name: 'zoom' 2s;
}
img:hover {
    -webkit-animation: 'zoom' 2s;
}

    </style>
</head>
<body>
        <img src="http://www.maplehilltree.com/CHRIST_PUNCHERS_HOOO__6_.jpg"/>

</body>
</html>

您可以在此处找到演示：http://jsfiddle.net/pDERw/

Answer 1

-moz-animation -name 是您的问题，但不要将-moz-animation用于这样一个简单的动画。

img {
    width:200px;
    height:200px;
    -moz-transition-duration: 2s; /* firefox */
    -webkit-transition-duration: 2s; /* chrome, safari */
    -o-transition-duration: 2s; /* opera */
    -ms-transition-duration: 2s; /* ie 9 */
}
img:hover {
    width: 1000px;
    height: 1000px;
}

Example

Answer 2

Mozilla不支持CSS3动画before version 5.0。我找到了：

您使用-moz-animation-name: 'zoom' 2s;。你应该使用动画的速记属性：

`-moz-animation: 'zoom' 2s;'

此外，您不应将动画名称括在'标记中。请参阅更新here，并使用Firefox版本5 +。

Answer 3

将所有悬停代码放在一个css标记中，也许它会覆盖以前的css规则。

使用css3动画缩放图像

3 个答案: