刷新页面时，您可以看到转换操作？

Question

我有点困惑。当我用chrome刷新页面时，我可以看到转换持续时间对图像和网页底部按钮的转换操作。奇怪的是它在Firefox上没有发生。在Mozilla上，当你刷新页面时，它没有转换。只有当你将它悬停时，它才能正常工作。我怎样才能修复它？

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* Ending of resets */

.container
{
	width:1200px;
	height:1630px;
	background-color:grey;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:10px;
}
.topmenu
{
	width:1200px;
	height:30px;
	background-color:skyblue;
	margin-left:auto;
	margin-right:auto;
}
.topmenu ul
{
	margin-left:100px;
}
.topmenu li
{
	float:left;
	margin-left:30px;
	margin-top:4px;
	font-size:17px;
	color:black;
}
.topmenu a
{
	color:black;
}
.logo2
{	
	position:relative;
	font-size:35px;
	margin-top:20px;
	margin-left:150px;

}
.logo2 a
{
	text-decoration:none;
	color:black;
}
.content
{
	width:950px;
	height:350px;
	margin:30px auto;
}
.square1
{
	float:left;
	width:300px;
	height:300px;
	border-bottom:40px solid darkgrey;
}
.square1 img
{
	-webkit-filter:blur(5px);
	filter:blur(5px);
	transition-duration:1s;
	cursor:pointer;
}
.square1 img:hover
{
	-webkit-filter:blur(0);
	filter:blur(0);
}
.square2
{
	float:left;
	width:300px;
	height:300px;
	margin-left:25px;
	border-bottom:40px solid darkgrey;
}
.square2 img
{
	-webkit-filter:brightness(200%);
	filter:brightness(200%);
	transition-duration:1s;
	cursor:pointer;
}
.square2 img:hover
{
	-webkit-filter:brightness(100%);
	filter:brightness(100%);
}
.square3
{
	float:left;
	width:300px;
	height:300px;
	margin-left:25px;
	border-bottom:40px solid darkgrey;
}
.square3 img
{
	-webkit-filter:contrast(200%);
	filter:contrast(200%);
	transition-duration:1s;
	cursor:pointer;
}
.square3 img:hover
{
	-webkit-filter:contrast(100%);
	filter:contrast(100%);
}
.square4
{
	float:left;
	width:300px;
	height:300px;
	border-bottom:40px solid darkgrey;
}
.square4 img
{
	-webkit-filter:drop-shadow(8px 8px 10px orange);
	filter:drop-shadow(8px 8px 10px orange);
	transition-duration:1s;
	cursor:pointer;
}
.square4 img:hover
{
	-webkit-filter:drop-shadow(12px 12px 14px green);
	filter:drop-shadow(12px 12px 14px green);
}
.square5
{
	float:left;
	width:300px;
	height:300px;
	margin-left:25px;
	border-bottom:40px solid darkgrey;
}
.square5 img
{
	-webkit-filter:grayscale(100%);
	filter:grayscale(100%);
	transition-duration:1s;
	cursor:pointer;
}
.square5 img:hover
{
	-webkit-filter:grayscale(0);
	filter:grayscale(0);
}
.square6
{
	float:left;
	width:300px;
	height:300px;
	margin-left:25px;
	border-bottom:40px solid darkgrey;
}
.square6 img
{
	-webkit-filter:hue-rotate(90deg);
	filter:hue-rotate(90deg);
	transition-duration:1s;
	cursor:pointer;
}
.square6 img:hover
{
	-webkit-filter:hue-rotate(360deg);
	filter:hue-rotate(360deg);
}
.square7
{
	float:left;
	width:300px;
	height:300px;
	border-bottom:40px solid darkgrey;
}
.square7 img
{
	-webkit-filter:invert(100%);
	filter:invert(100%);
	transition-duration:1s;
	cursor:pointer;
}
.square7 img:hover
{
	-webkit-filter:invert(0);
	filter:invert(0);
}
.square8
{
	float:left;
	width:300px;
	height:300px;
	margin-left:25px;
	border-bottom:40px solid darkgrey;
}
.square8 img
{
	-webkit-filter:saturate(8);
	filter:saturate(8);
	transition-duration:1s;
	cursor:pointer;
}
.square8 img:hover
{
	-webkit-filter:saturate(2);
	filter:saturate(2);
}
.square9
{
	float:left;
	width:300px;
	height:300px;
	margin-left:25px;
	border-bottom:40px solid darkgrey;
}
.square9 img
{
	-webkit-filter:sepia(100%);
	filter:sepia(100%);
	transition-duration:1s;
	cursor:pointer;
}
.square9 img:hover
{
	-webkit-filter:sepia(0);
	filter:sepia(0);
}
.square10
{
	float:left;
	width:300px;
	height:300px;
	border-bottom:40px solid darkgrey;
}
.square10 img
{
	-webkit-filter:opacity(30%);
	filter:opacity(30%);
	transition-duration:1s;
	cursor:pointer;
}
.square10 img:hover
{
	-webkit-filter:opacity(100%);
	filter:opacity(100%);
}
.square11
{
	float:left;
	width:300px;
	height:300px;
	margin-left:25px;
	border-bottom:40px solid darkgrey;
}
.square11 img
{
	-webkit-filter:contrast(150%) brightness(200%);
	filter:contrast(150%) brightness(200%);
	transition-duration:1s;
	cursor:pointer;
}
.square11 img:hover
{
	-webkit-filter:contrast(100%) brightness(100%);
	filter:contrast(100%) brightness(100%);
}
.square12
{
	float:left;
	width:300px;
	height:300px;
	margin-left:25px;
	border-bottom:40px solid darkgrey;
}

.loadmore
{
	position:relative;
	margin:50px auto;
	width:100px;
	height:100px;
	border-radius:30px;
	background-color:orange;
	text-align:center;
	transition-duration:1s;
}
.loadmore:hover
{
	background-color:skyblue;
}
.loadmore a
{
	color:black;
	text-decoration:none;
}
.loadmore h1
{
	padding-top:37px;
	font-size:20px;
	font-weight:bold;
}
.footermenu
{
	width:600px;
	height:30px;
	background-color:yellow;
	margin:10px auto;
}

.footermenu li
{
	width:150px;
	height:30px;
	float:left;
	text-align:center;
	margin-top:5px;
	font-size:18px;
}
.footermenu a
{
	color:black;
	text-decoration:none;
}
form
{
	float:right;
	margin-right:140px;
	margin-top:-25px;
	z-index:999;
}
 label
 {
	 z-index:999;
 }
input
{
	width:150px;
	z-index:999;
}

<!doctype html>
<html>
<head>
<title>Just Web</title>
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width; scale=1" />
	<link href="tristastyle.css" rel="stylesheet" type="text/css" />
	<link rel="icon" href="images/favicon.ico">
</head>

<body>
	
<div class="container">
		
	<div class="header">
	
		<div class="topmenu">
			<nav>
			<ul>
				<li><a href="index.html">Home</a></li>
				<li><a href="#">Project</a></li>
				<li><a href="#">menu</a></li>
			</ul>	
			</nav>
		</div>
		
		<div class="logo2"><a href="index.html">protosite</a></div>
		
		<form>
		  <label for="fname">search</label>
		  <input type="text" id="fname" name="fname">
		</form>
		
	</div>
	
		<div class="content">
				<div class="square1"><img src="images/girls/image1.png"></div>
				<div class="square2"><img src="images/girls/image2.png"></div>
				<div class="square3"><img src="images/girls/image3.png"></div>
		</div>
		<div class="content">
				<div class="square4"><img src="images/girls/image4.png"></div>
				<div class="square5"><img src="images/girls/image5.png"></div>
				<div class="square6"><img src="images/girls/image6.png"></div>
		</div>
		<div class="content">
				<div class="square7"><img src="images/girls/image7.png"></div>
				<div class="square8"><img src="images/girls/image8.png"></div>
				<div class="square9"><img src="images/girls/image9.png"></div>
		</div>
		<div class="content">
				<div class="square10"><img src="images/girls/image1.png"></div>
				<div class="square11"><img src="images/girls/image2.png"></div>
				<div class="square12"><img src="images/girls/image3.png"></div>
		</div>
		
		<div class="loadmore">
			<a href="#"><h1>Load more</h1></a>
		</div>
		
		<div class="footermenu">
			<nav class="navig">
			<ul>
				<li><a href="#">Policy</a></li>
				<li><a href="#">FAQ</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Contact</a></li>
			</ul>	
			</nav>
	</div>
		
</div>	
		
	
</body>

</html>

Answer 1

尝试将此添加到您的课程中：
-moz-filter：不透明度（根据需要）

如果这会使Firefox像Chrome一样过渡，而你不想要那样，那么删除-webkit-filter：