首先,对不起我的英语不好。这是问题所在:我创建了一个粉丝制作的网站(仅用于练习html5和css3),然后尝试放置一些动画。它们适用于Safari,Opera和Chrome,但不适用于Mozilla FireFox。

CSS代码是:



section figure img {
	padding:4px;
	margin: auto 5px;
	background:white;
	border-radius:20px;
	-webkit-transition:-webkit-transform 0.3s ease-in-out 0.1s;
	-moz-transition:-moz-transform 0.3s ease-in-out 0.1s;
	box-shadow:white 5px 5px 10px;
}





它是动画之一,我想如果我能解决这个问题,我就能解决其他动画不起作用的问题。

感谢您的支持。 :)

最佳答案

您仅使用两个带前缀的过渡属性,而忽略其余的属性。
试试这个:(and check the browser support of the property

section figure img {
    padding:4px;
    margin: auto 5px;
    background:white;
    border-radius:20px;
    -webkit-transition:-webkit-transform 0.3s ease-in-out 0.1s;
    transition:-webkit-transform 0.3s ease-in-out 0.1s;
    transition:transform 0.3s ease-in-out 0.1s;
    transition:transform 0.3s ease-in-out 0.1s, -webkit-transform 0.3s ease-in-out 0.1s;
    -webkit-box-shadow:white 5px 5px 10px;
            box-shadow:white 5px 5px 10px;
}

10-05 20:58
查看更多