滑动门按钮与CSS 3过渡

Question

我试图用CSS 3转换做一些简单的事情，但很难做到。我有一个图像按钮，里面有两个状态，当你把鼠标悬停在它上面时，我希望图像变为on状态。

到目前为止，沼泽地的标准——这种滑动门技术已经存在了很多年。转折点是，我需要它从一种状态很好地淡出到另一种状态，即当不透明度设置为0时，它会平滑地淡出并向上移动50%，然后再次淡出，反之亦然。哦，是的，它必须用内联图像而不是背景图像来完成，因为这就是我正在使用的CMS所吐出的。

我已经使用jQuery/CSS转换在图像后面创建了一个"重影"元素，当图像淡出时，该元素会淡入。我对此并不满意，我觉得必须有一种更好的方法来实现它，只使用CSS转换，或者至少使用关键帧动画。有什么想法吗？

以下是我必须使用的HTML按钮代码示例：

<ul>
<li>
<a href="#">
<img src="01_double.jpg" alt="The Stylist" height="198" width="396">
</a>
</li>
</ul>

Answer 1

这将是webkit 的CSS

a {
width: 200px;
position: absolute;
overflow: hidden;
}
img {
opacity: 1;
left: 0%;
position: relative;
}
img:hover {
-webkit-animation: ani 1s;
left: -50%;
}
@-webkit-keyframes ani {
0% {opacity: 1; left: 0%;}
50% {opacity: 0; left: 0%;}
51% {opacity: 0; left: -50%;}
100% {opacity: 1; left: -50%;}
}

小提琴

您可以在mouseout中设置反向动画，在基本状态下反向设置。

img {
opacity: 1;
left: 0%;
position: relative;
-webkit-animation: ani 1s reverse;
}

更新的小提琴

这有一个问题，即它在页面加载时也会设置动画。如果要避免这种情况，请在类中设置此动画，并将该类设置为页面加载时的元素。