div上的转换:在safari中不起作用之后 以下是代码:
HTML:
.bbtn {
width: 151px;
height: 48px;
background: #ef2e41;
margin: auto;
margin-top: 32px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
position: relative;
border: 2px solid #5f121a;
}
.bbtn input {
font-size: 25px;
text-transform: uppercase;
text-align: center;
color: #fff;
background: none;
border: 0;
width: 100%;
padding: 6px 0;
position: relative;
z-index: 10;
}
.bbtn:hover {
border: 2px solid #373737;
}
.bbtn::after,
.bbtn::before {
content: "";
position: absolute;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
width: 0%;
height: 100%;
top: 0;
left: 0;
background: #202020;
}
.bbtn:hover::after {
width: 100%;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}
<div class="bbtn">
<input name="" type="submit" value="search">
</div>
在这里,您可以找到我的fiddle。
答案 0 :(得分:0)
你的野生动物园版本是什么?它仅支持Safari 6.1及更高版本。
请参阅:http://css-tricks.com/transitions-and-animations-on-css-generated-content/