Question

我正在尝试使用CSS 3过渡做一些简单的事情但是却在苦苦挣扎。我有一个图像按钮，其中有2个状态，当您将鼠标悬停在它上面时，我希望图像更改为on状态。

到目前为止，这样的沼泽标准 - 这种滑动门技术已经存在于驴年。扭曲是我需要它从一个状态很好地淡化到另一个状态，即你鼠标悬停在按钮上它淡出平滑地向上移动50％而不透明度设置为0然后再次淡入 - 反之亦然当你鼠标移出时。哦，是的，它必须使用内嵌图像而不是背景图像，因为这是我正在使用的CMS吐出来的。

我使用jQuery / CSS过渡来实现这一点，在图像后面创建一个'ghost'元素，当图像淡出时淡入淡出。我对此并不满意，并认为必须有一种更好的方法来实现它只使用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%;}
}

fiddle

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

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

updated fiddle

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

带有CSS 3过渡的滑动门按钮

1 个答案:

fiddle

updated fiddle