html - Keep div faded out after transition -

html - Keep div faded out after transition -

i using css code fade in , fade out html div, , after delay, fade in div. however, after sec div fades in , code ends, first div reappears. code using posted below. wanted know how create sure first div dosent reappear after code ends.

.text { -webkit-animation: fadein 5s } @-webkit-keyframes fadein { 0% { opacity: 0; } 35% { opacity: 1; } 72% { opacity:1; } 100% { opacity:0; } } @-webkit-keyframes fadein { { opacity:0; } { opacity:1; } } @-moz-keyframes fadein { { opacity:0; } { opacity:1; } } @keyframes fadein { { opacity:0; } { opacity:1; } } .bdy { opacity:0; /* create things invisible upon start */ -webkit-animation:fadein ease-in 1; /* phone call our keyframe named fadein, utilize animattion ease-in , repeat 1 time */ -moz-animation:fadein ease-in 1; animation:fadein ease-in 1; -webkit-animation-fill-mode:forwards; /* makes sure after animation done remain @ lastly 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>

you can ... here jsfiddle

obs: add together other css selectors besides -webkit- create cross-browser

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

html css html5 css3