Html Css过渡淡入延迟淡出

我想制作一个css转换的动画，先淡入，然后延迟，然后淡出，这在css3中是可能的吗

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

我是一个测试
对

我做了一个JSFIDLE：

---

感谢您抽出宝贵的时间

您可以在不使用淡出课程的情况下完成此操作。您可以在

fadeIn

本身中执行此操作

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

更新：使用jQuery

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

---

您可以在不使用

fadeout

类的情况下执行此操作。您可以在

fadeIn

本身中执行此操作

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

更新：使用jQuery

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

---

谢谢你的快速反应！但问题是，我想要一个特定的延迟时间，比如7秒，然后动画淡出？你知道我的意思吗？然后你应该使用jquery向给定的div添加

fadeOut

类是的，这是我的实际解决方案，但我想用它作为滑块，所以我想重复3到4次这个过程。嗯：/你的意思是这样的$（“.content1”）.addClass（“load”）；不透明度：0；对吗？谢谢你的快速反应！但问题是，我想要一个特定的延迟时间，比如7秒，然后动画淡出？你知道我的意思吗？然后你应该使用jquery向给定的div添加

fadeOut

类是的，这是我的实际解决方案，但我想用它作为滑块，所以我想重复3到4次这个过程。嗯：/你的意思是这样的$（“.content1”）.addClass（“load”）；不透明度：0；正确的？