Question

我希望动画一个淡入淡出然后延迟的css过渡然后逐渐淡出是否有css3可能？

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

我做了一个jsFiddle：http://jsfiddle.net/nntYz/

感谢您的时间

Answer 1

您可以在没有fadeout课程的情况下执行此操作。您可以在fadeIn本身执行此操作。

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

使用jQuery更新：Demo

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

Css Transition Fade in delay淡出

1 个答案: