CSS3 Transition Opera出现问题！ [英] Problem with CSS3 Transition Opera!

问题描述

在我的网站 http://probuzzweb.co.uk/中，我遇到了一个奇怪的问题，即我的滑出式登录栏使用CSS3 Transition在所有浏览器中都能工作(当然，除了IE)在Opera中做得很奇怪:滑入/滑出过渡工作正常，但是滑回时却留下痕迹.标签:

In my site http://probuzzweb.co.uk/ I have a weird problem in that my slide out login bar using CSS3 Transition works in all browsers (except IE of course) does something weird in Opera: The slide in/slide out transition works, but it leaves a trail when it slides back in. I am using this css for the positioning etc. of the tab:

#tabtext, #tabtextie{
	position:			fixed;
	text-transform:		uppercase;
	padding:			5px;
	border-radius:		25px 25px 0 0;
	color:				#ccc;
	background-color:	#242424;
	text-align:			center;
	cursor:				pointer;
}
#tabtext{
	height:				20px;
	width:				150px;
	margin:				65px 120px;
}
#tabtextie{
	margin:				0 185px;
	padding:			5px;
	height:				20px;
	width:				150px;
}
#tab{
	position:			fixed;
	width:				185px;
	height:				400px;
	color:				#ccc;
	background-color:	#242424;
	left:				0;
	margin:				0 auto;
	margin-top:			-200px;
	top:				50%;
	padding-left:		20px;
	border-radius:		0 0 25px 0;
	z-index:			2;
}
#tab:hover{
	left:				200px;
}

这是实际转换的CSS:

And this is the css for the actual transition:

#tab{
	transition:				.5s linear;
	-webkit-transition:		.5s linear;
	-o-transition:			.5s linear;
	-moz-transition:		.5s linear;
}
#tab:hover{
	transition:				.5s linear;
	-webkit-transition:		.5s linear;
	-o-transition:			.5s linear;
	-moz-transition:		.5s linear;
}

这是html:

And this is the html:

<section id="tab">
				<!--[if gt IE 8]><!--><div id="tabtext">Login/Register</div><!--<![endif]-->
				<!--[if lt IE 8]><div id="tabtextie">Login/Register</div><![endif]-->
				<h3>Login</h3>
				<form action="default.php" method="post">
					<label for="Lname">Your Username:</label>
					<input type="text" id="Lname"><br>
					<label for="Lpass">Your Password:</label>
					<input type="password" id="Lpass"><br><br>
					<input type="submit" value="Submit">
				</form>
				<br>
				<h3>Register</h3>
				<form action="default.php" method="post">
					<label for="Rname">Your Username:</label>
					<input type="text" id="Rname"><br>
					<label for="Rpass">Your Password:</label>
					<input type="password" id="Rpass"><br>
					<label for="Rpass2">Password again:</label>
					<input type="password" id="Rpass2"><br><br>
					<input type="submit" value="Submit">
				</form>
			</br></br></br></br></br></br></br></br></section>

如果您在任何浏览器中运行我的网站 http://probuzzweb.co.uk/，除了Opera之外，它都可以正常运行.运行它，您会明白我的意思.这很奇怪，我不知道如何解决.

任何帮助将不胜感激.谢谢.

If you run my site http://probuzzweb.co.uk/ in any browser it works fine...apart from opera. Run it and you''ll see what I mean. It''s bizarre and I can''t figure out how to fix it.

Any help would be greatly appreciated. Thanks.

推荐答案

嘿，

添加

Hey there,

add

-o-transform: translate(0px);

也在:

on too:

#tab:hover{
	transition:				.5s linear;
	-webkit-transition:		.5s linear;
	-o-transition:			.5s linear;
	-moz-transition:		.5s linear;
	 -o-transform: translate(0px);
}

不用担心
Jrop

no worries
Jrop

这篇关于CSS3 Transition Opera出现问题！的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！