Css Transition Fade in delay fade out

Question

i want to animate a css transition that fade in then delay then fade out is that with css3 possible?

<div class="footer1">
<div class="content1">
<h1 class="animated fadeInLeft">IM A TEST</h1>
<h2 class="animated3 fadeInLeft">YES</h2> 
</div>
</div> 

I've made a jsFiddle: http://jsfiddle.net/nntYz/

Thanks for your time

Solution

You can do this without the fadeout class. You can do it in fadeIn itself.

Working Demo

CSS

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
    }   25% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
    75% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(20px);
    }
}

Update: Demo with jQuery

$(function(){
 setTimeout(function() {
        $(".content1").addClass("fadeOutLeft"); 
  },3000);
});

Comments

[crixom11]

Thx for your fast response! But the problem is that i want a specific delay time for the time out maybe 7 seconds and then the animation fade out for example? You know what i mean?

[Surjith S M]

Then you should use jquery to add fadeOut class to the given div

[crixom11]

yes thats my actually solution but i want to use this for a slider so i want to repeat 3 or 4 times this process hmm :/ you mean something like this $(".content1").addClass("load"); with opacity: 0; right?