我想放大图片。 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/
最佳答案
-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;
}
关于html - 使用 css3 动画缩放图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8444936/