html - CSS 背景过渡和响应(淡入淡出)

Question

该论坛的一位成员非常友好地提供了以下 CSS 翻转代码，它是“流畅的”并且可以根据浏览器大小调整尺寸。我已经包含了下面的代码以及 Jfiddle 链接:

CSS

.container {
    width: 100%;
    height: 300px;
    background: #f1f1f1;
}
a.widgetbook {
    display:block;
    max-width: 369px;
    max-height: 85px;
    width: 100%;
    height: 100%;
    background: url("http://69.195.124.70/~profetz4/wp-content/themes/artificer/images/btn-contact.jpg") no-repeat left top;
    margin-bottom: 6px;
    background-size: 200%;
}
a.widgetbook:hover {
    background-position: right top;
}

HTML

<div class="container">
<a href="#" class="widgetbook">
</a>
</div>

http://jsfiddle.net/cw6hN/

我希望应用淡入 CSS 过渡，它将正确定位翻转图像，然后以不透明度 1 淡入。我可以对标准按钮(无响应)执行此操作，但是还没有弄清楚如何将它应用到上面的按钮场景中。非常感谢任何有关如何最好地实现这一目标的帮助。

提前致谢!

D

Answer 1

将 JSFiddle 更新为您想要的方式，但使用 2 个单独的图像。

将此添加到 a.widgetbook

transition:all .6s;

JSFiddle

要获得您正在寻找的“淡入”效果，您需要创建两个不同的图像。