在CSS中设置不同的淡入时间和淡出时间

你可以这样做:

CSS:

.header {
width: 100%;
height: 100px;
background: white;
}

背景是白色的，这样我们就可以把它和网页融合在一起，如果你的背景颜色不同，那就改变它。

:

<div onmouseover="fade()" class=header></div>

JavaScript:

function fade() {
var styles = `
.header {
background: black;
-webkit-animation: fadeinout 4s linear forwards;
animation: fadeinout 4s linear forwards;
opacity: 0;
}
@-webkit-keyframes fadeinout {
50% { opacity: 1; }
}
@keyframes fadeinout {
50% { opacity: 1; }
}
`
var style = document.createElement("style")
style.type = "text/css"
style.innerText = styles
document.head.appendChild(style)
}

悬停后将淡入4秒，然后淡出4秒。