css - 同じdiv要素にCSSを使用して3秒の遅延でfadeInとfadeOutを有効にする方法または

Question

要素またはその他の div タグに 3 秒の遅延で、fadeIn および fadeOut 効果を適用したいと考えています。jQuery を使用せず、CSS ベースのみを回答してください。ありがとう

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;
    }
}