css - 如何使用 CSS 为相同的 div 元素或

Question

我想对元素或任何其他具有 3 秒延迟的 div 标签应用淡入和淡出效果。回答 CSS 只基于不使用 jQuery。谢谢

Answer 1

我会给你这个疑问的好处，但你可以通过搜索 SO 或在线找到答案，只需最少的努力......但是这里有......一个淡出的快速示例......反向淡入：

演示小提琴

HTML

<div></div>

CSS

div {
    height:100px;
    width:100px;
    background:red;
}
div:hover {
    -webkit-animation:fadeOut 1s;
    -webkit-animation-delay:3s;
    -webkit-animation-fill-mode:forwards;
    -moz-animation:fadeOut 1s;
    -moz-animation-delay:3s;
    -moz-animation-fill-mode:forwards;
    animation:fadeOut 1s;
    animation-delay:3s;
    animation-fill-mode:forwards;
}
@-webkit-keyframes fadeOut {
    from {
        opacity:1;
    }
    to {
        opacity:0;
    }
}
@-moz-keyframes fadeOut {
    from {
        opacity:1;
    }
    to {
        opacity:0;
    }
}
@keyframes fadeOut {
    from {
        opacity:1;
    }
    to {
        opacity:0;
    }
}