悬停CSS上的缓慢过渡答案

【问题标题】：slow transition on hover css悬停CSS上的缓慢过渡
【发布时间】：2016-10-20 17:17:46
【问题描述】：

我有一个带有背景的滑块，悬停在此处： http://nigarn.com

我尝试了多种 CSS 来减缓白色背景的过渡，但都没有奏效。

这是我目前拥有的：

.sp-layer {
    opacity: 1 !important;
 -moz-transition: opacity 7.5s!important;
    -webkit-transition: opacity 7.5s!important;
    transition: opacity 7.5s!important;
color: #fff;
padding-top: 157px!important;
padding-bottom: 180px!important;
 pointer-events: none;
}


.sp-slide:hover .sp-layer {
    opacity: 1 !important;
 -moz-transition: opacity 7.5s!important;
    -webkit-transition: opacity 7.5s!important;
    transition: opacity 7.5s!important;
color: #000;
background:url(http://www.nigarn.com/wp-content/uploads/2016/10/slide-background-2-5.png)no-repeat center top;
padding-top: 157px!important;
padding-bottom: 180px!important;
 pointer-events: none;
}

但背景仍然会立即弹出。如果有人有建议，我很感激。

【问题讨论】：

标签： css hover transition

【解决方案1】：

首先，当您实际尝试为background-image 设置动画时，您正在为opacity 属性设置动画； opacity 一开始就不是 0。其次，目前没有办法通过 CSS transition 淡入 background-image。

由于您的背景图片似乎是统一的半透明颜色，您应该改用background-color。

.sp-layer {
    transition: background-color 0.75s;
}
.sp-slide:hover .sp-layer {
    background-color: rgba(255, 255, 255, 0.75);
}

【讨论】：