Question

我正在使用css代码淡入然后淡出html div，并在延迟之后淡入另一个div。但是，在第二个div淡入并且代码结束后，第一个div重新出现。我正在使用的代码发布在下面。我想知道在代码结束后如何确保第一个div剂量重新出现。

.text {               
    -webkit-animation: fadein 5s
}
@-webkit-keyframes fadein {
    0% {
        opacity: 0;
    }
    35% {
        opacity: 1;
    }
    72% {
        opacity:1;
    }
    100% {
        opacity:0;
    } 
}

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }



.bdy {
    opacity:0;  /* make things invisible upon start */
    -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;

    -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we       remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;

    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;
}

.bdy {
-webkit-animation-delay: 4.5s;
-moz-animation-delay: 4.5s;
animation-delay: 4.5s;
}

HTML：

 <header>
  <div class="text_paragraph">
   <h1>DEMO</h1>
   <h3>Secondary School</h3>
   <h3>Grade</h3>
  </div>    
  <div class="bdy">
    <h1>hi</h1>      
  </div>        
 </header>

Answer 1

你可以这样做......这里是jsFiddle

Obs：除了-webkit-之外还添加其他css选择器以使其成为跨浏览器

CSS

.text_paragraph {               
    -webkit-animation: fadeInOut 2s;
    opacity:0;
}

.bdy {
    -webkit-animation:fadeIn 3s;
}

@-webkit-keyframes fadeInOut{
    0% {
        opacity: 0;
    }
    35% {
        opacity: 1;
    }
    72% {
        opacity:1;
    }
    100% {
        opacity:0;
    } 
}

@-webkit-keyframes fadeIn{
    0% {
        opacity: 0;
    }
    75% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}

转换后保持div淡出

1 个答案: