-5

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

Azhar
  • 693
  • 9
  • 22
  • 1
    post your code that you've tried so far. otherwise your question is going to be closed and no-one will be able to give you an answer. – Bhojendra Rauniyar Nov 20 '14 at 10:35
  • 1
    Welcome to SO, in order to get an answer, you will need to post the code you have tried as stated by @Bhojendra-C-LinkNepal + ask for a specific isue. We can't do the whole thing for you. For more info please see here : http://stackoverflow.com/help/how-to-ask – web-tiki Nov 20 '14 at 10:38
  • HTML `

    My hedding goes here...

    `
     – Azhar Nov 20 '14 at 11:25
  • **CSS**
    `.fadein{ opacity:0; animation:fadein 4s infinite; } @keyframes fadein{ from{opacity:0;} to{opacity:1;} } .fadeout{ opacity:1; animation:fadeout 3s infinite; animation-delay:5s; } @keyframes fadeout{ from{opacity:1;} to{opacity:0;} }`     – Azhar Nov 20 '14 at 11:33
  • http://jsfiddle.net/azhrhussain/pqry93n7/ – Azhar Nov 20 '14 at 11:39
  • @Bhojendra-C-LinkNepal + here is my code...kindly help – Azhar Nov 20 '14 at 11:42

1 Answers1

2

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;
    }
}
SW4
  • 69,876
  • 20
  • 132
  • 137