How to make fadeIn and fadeOut effecet with delay of 3second using CSS for same div element or <h1>

Question

I want to apply fadeIn and fadeOut effect on element or any other div tag with 3second dlay. answer CSS based only not use jQuery. thanks

Answer 1

I'll give you the benefit of the doubt, but you can find an answer with minimal effort searching either SO or online...but here goes...a quick example of a fade out...reverse for fade in:

Demo Fiddle

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