CSS转换和转换在Safari 5.1.7中不起作用

时间:2017-10-23 13:24:34

标签: css safari transform transition

我在获取下划线栏以在文字链接下制作动画时遇到问题。您可以在此处查看一个有效的示例:{{3}}

动画在除Safari 5.1.7之外的所有浏览器中都能正常运行。我究竟做错了什么?这是我的代码片段:

编辑:对不起,我添加了html和更多的CSS规则。我希望有所帮助。



.infiniteNav{
	width: 100%;
	height: 56px;
	background-color: #9e0707;
	background: linear-gradient(#c71e1e, #800909);
	background: -webkit-linear-gradient(#c71e1e, #800909);
	position: absolute;
	top: 271px;
	z-index: -2;
}

nav{
	width: 955px;
	height: 56px;
	float: left;
	text-align: center;
	display: block;
	background-color: #9e0707;
	background: linear-gradient( #c71e1e, #800909);
	background: -webkit-linear-gradient(#c71e1e, #800909);
}

nav a{
	position: relative;
	font-size: 25px;
	font-family: arial;
	color: #e0e0e0;
	text-decoration: none;
	font-weight: bold;
	margin: 0px 15px;
	line-height: 55px;
}

/********************************************************************************************************
This is the animated underline bar.																		*
********************************************************************************************************/

nav a:before{
	content: "";
	position: absolute;
	width: 100%;
	height: 2px;
	bottom: 0;
	left: 0;
	background-color: #e0e0e0;
	visibility: hidden;
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	/*-webkit-transition: all 0.3s ease-in-out 0s;*/
	-webkit-transition-property: all;
	-webkit-transition-duration: 0.3s;
	-webkit-transition-timing-function: ease-in-out;
	-webkit-transition-delay: 0s;
	transition: all 0.3s ease-in-out 0s;
}

nav a:hover:before{
	visibility: visible;
	-webkit-transform: scaleX(1);
	transform: scaleX(1);
	color: #e0e0e0;
}

nav a:active{
	color: #e0e0e0;
}

<nav>
				<a href="index.html">Home</a>
				<a href="shop.html">Shop</a>
				<a href="sales.html">Sales</a>
				<a href="catalog.html">Catalog</a>
				<a href="events.html">Events</a>
				<a href="contact.html">Contact</a>
				<a href="aboutus.html">About us</a>
				<a href="partners.html">Partners</a>
			</nav>
&#13;
&#13;
&#13;

0 个答案:

没有答案