我的CSS转换突然停止,如下图所示。
这只发生在Chrome上,而在Firefox上一切正常,除此之外我无法测试。
有趣的是,不仅转换无缘无故停止,而且一旦我右键单击具有此类的按钮,它就会在其余的浏览会话中正常工作。
以下是当工作转换结束时按钮的外观:
HTML和CSS代码
.main-link{
position: relative;
display: block;
overflow: hidden;
width: 200px;
height: auto;
color: #FFF;
text-align: center;
text-decoration: none;
border: 2px solid #53c1f8;
}
.main-link::after {
position: absolute;
overflow: none;
content: "";
background: #53c1f8;
left: 50%;
top: 50%;
height: 0%;
width: 100%;
z-index: -1;
transition: 0.75s ease-in-out;
transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.main-link:hover::after {
height: 15em;
}
<body>
<div id='main'>
<div id='content'>
<div id='main-image'>
<div id='main-image-intro'>
<ul id='main-image-cto'>
<li>
<a href='subscribe.html' class='main-link'> GET STARTED </a>
</li>
<li>
<a href='subscribe.html' class='main-link'> GIFT IT </a>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
在Ubuntu 15.10下测试通过:
- Chromium版本号为47.0.2526.73
- Mozilla Firefox版本号为43.0.4