如何通过CSS过渡淡出（管理淡入，但不明白如何淡出没有“Webkit”）

我试过寻找这个，但找不到它。我创建了一个类，当它悬停在pararaph元素上时，可以放大并减少不透明度。我在（.5s）上使用了一个转换。这工作得很好。但是我看过（我看过一个视频），你可以在悬停后创建一个转换。我一直在尝试使用：如何通过CSS过渡淡出（管理淡入，但不明白如何淡出没有“Webkit”）

image:hover:after p { 
    transition: .5s; 
}

但它不工作。我不明白这些webkit选项。我没有使用过webkit就已经看到了这一点。基本上，没有webkit可能吗？或者是我的想象力？

如果webkit是唯一的方式有人可以链接我一些了不起的教程。

这是我目前在我的样式表：

.image p { 
    color: black; 
    font-weight: bold; 
    background: rgba(235, 229, 235, .3); 
} 


.image:hover p { 
    background: rgba(235, 229, 235, .9); 
    transition: 0.5s; 
    font-size: 110%; 
}

感谢，

卢克

来源

2017-05-04 Luke Bennett

也许你在这里混淆的东西。你的意思是在“一旦悬停效应结束后”及时的“后”，或者你真的在谈论伪元素'：after'是一个html组件？ –

添加此

.image p { 
    transition: .5s ease-out 
}

来源

2017-05-04 11:57:55 Nathan

完美！那已经做到了！简单而简单！非常感谢！很高兴我问。希望我能给你多个像！ –

尝试transition财产转移到正常的选择不是悬停;否则，过渡效果将只适用于当您未被m掉时盘起 ..

例如，

.image p { 
    color: black; 
    font-weight: bold; 
    background: rgba(235, 229, 235, .3); 
    transition: 0.5s; 
} 


.image:hover p { 
    background: rgba(235, 229, 235, .9); 
    font-size: 110%; 
}

来源

2017-05-04 11:55:32 Paul

.image p a { 
 
    -webkit-transition: all 2s ease-in-out; 
 
    -moz-transition: all 2s ease-in-out; 
 
    -ms-transition: all 2s ease-in-out; 
 
    -o-transition: all 2s ease-in-out; 
 
    transition: all 2s ease-in-out; 
 
} 
 
.image p a:hover { 
 
    -webkit-opacity: 0.25; 
 
    -moz-opacity: 0.25; 
 
    opacity: 0.25; 
 
}

<div class="image"> 
 
    <p><a>fade in fade out effect on hover element</a> </p> 
 
</div>

来源

2017-05-04 12:06:15

使用css3过渡效果并使用不透明度淡化元素 –

如何通过CSS过渡淡出（管理淡入，但不明白如何淡出没有“Webkit”）

回答

相关问题