I'm trying to make my title and welcome footer of my login screen slowly ease together, rather than snapping together when I fade out the input form, here is a jsfiddle I whipped up to illustrate what I'm trying to do.
https://jsfiddle.net/91ac4g0f/5/
Like I said, instead of the text snapping together I want it to ease together once the input form is out of the way.
Code from fiddle:
html
<div class="flexer">
<h3 class="transition">
Site Name
</h3>
<div class="seperator"></div>
<div id="hide">
<input type="text" placeholder="Username"><br>
<input type="password" placeholder="Password"><br>
<input type="password" placeholder="Password Confirmation"><br>
</div>
<h1 class="transition">
Welcome
</h1>
</div>
css
.hideani {
animation: fadeout 2s;
}
.hide {
display: none;
}
.flexer {
color: white;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
background: #37474F;
height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
h3, h1 {
margin: 5px;
}
.seperator {
width: 30%;
height: 1px;
border-bottom: 1px solid rgba(51, 51, 51, 0.3);
margin-bottom: 7px;
}
h3 {
font-weight: 200;
}
/* attempt from http://stackoverflow.com/questions/18364938/how-to-animate-elements-move-with-css3-transitions-after-hiding-some-element */
// Didn't seem to work
.transition {
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
@keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
input {
height: 25px;
border-radius: 5px;
border: none;
margin-bottom: 3px;
padding: 5px 5px 5px 10px;
font-size: 14px;
font-weight: 700;
background: #333;
color: white;
}
js
setTimeout(() => {
document.getElementById("hide").className = "hideani";
}, 2000)
setTimeout(() => {
document.getElementById("hide").className += " hide";
}, 4000);
I updated your code and came up with this: JSFiddle
var siteName = document.getElementById("h3");
var welcome = document.getElementById("h1");
setTimeout(() => {
document.getElementById("hide").className = "hideani";
}, 2000)
setTimeout(() => {
document.getElementById("hide").className += " hide";
siteName.style.top = "113px"
welcome.style.top = "147px"
}, 4000);
I repositioned your h1,h3
absolutely so i can control it with the js using its top
.
You can make the title and welcome footer of the login screen slowly ease together by changing the opacity of the the input to zero opacity: 0.0;
for two seconds before doing display: none;
in order to allow for the movement to take place.
Check out the fiddle here https://jsfiddle.net/Lwsbh8fp/1/
and here are the codes:
setTimeout(() => { document.getElementById("hide").className = "hideani"; }, 2000) setTimeout(() => { document.getElementById("a").className += " movea"; }, 4000); setTimeout(() => { document.getElementById("b").className += " moveb"; }, 4000); setTimeout(() => { document.getElementById("c").className += " movec"; }, 4000); setTimeout(() => { document.getElementById("hide").className += " hide"; }, 4000); setTimeout(() => { document.getElementById("hide").className += " none"; }, 6000);
.hideani { animation: fadeout 2s; } .none { display: none; } .movea { position: relative; -webkit-animation-name: examplea; -webkit-animation-duration: 2s; animation-name: examplea; animation-duration: 2s; } @-webkit-keyframes examplea { 0% {left:0px; top:0px;} 100% {left:0px; top:-56px;} } @keyframes examplea { 0% {left:0px; top:0px;} 100% {left:0px; top:-56px;} } .moveb { position: relative; -webkit-animation-name: exampleb; -webkit-animation-duration: 2s; animation-name: exampleb; animation-duration: 2s; } @-webkit-keyframes exampleb { 0% {left:0px; top:0px;} 100% {left:0px; top:56px;} } @keyframes exampleb { 0% {left:0px; top:0px;} 100% {left:0px; top:56px;} } .movec { position: relative; -webkit-animation-name: examplec; -webkit-animation-duration: 2s; animation-name: examplec; animation-duration: 2s; } @-webkit-keyframes examplec { 0% {left:0px; top:0px;} 100% {left:0px; top:56px;} } @keyframes examplec { 0% {left:0px; top:0px;} 100% {left:0px; top:56px;} } .hide { opacity: 0.0; } .flexer { color: white; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; background: #37474F; height: 300px; display: flex; flex-direction: column; justify-content: center; align-items: center; } h3, h1 { margin: 5px; } .seperator { width: 30%; height: 1px; border-bottom: 1px solid rgba(51, 51, 51, 0.3); margin-bottom: 7px; } h3 { font-weight: 200; } /* attempt from http://stackoverflow.com/questions/18364938/how-to-animate- elements-move-with-css3-transitions-after-hiding-some-element */ // Didn't seem to work .transition { -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; } @keyframes fadeout { from { opacity: 1; } to { opacity: 0; } } input { height: 25px; border-radius: 5px; border: none; margin-bottom: 3px; padding: 5px 5px 5px 10px; font-size: 14px; font-weight: 700; background: #333; color: white; }
<div class="flexer"> <h3 id="b" class="transition"> Site Name </h3> <div id="c" class="seperator"></div> <div id="hide"> <input type="text" placeholder="Username"><br> <input type="password" placeholder="Password"><br> <input type="password" placeholder="Password Confirmation"><br> </div> <h1 id="a" class="transition"> Welcome </h1> </div>
All are so good.But the without mention height
Its wont give ah effect. Simply add height of the hide
box its show the effect. Updated Fiddle *
Reduce the height of the hide
box apply the forwards
effect of animation its with hide with end of the animation.No need to use display:none
with hide class
#hide {
height:120px;
overflow:hidden;
transition:all 1s ease;
}
setTimeout(() => { document.getElementById("hide").className = "hideani"; document.getElementById("hide").style.height = "1px"; }, 2000)
.hideani { animation: fadeout 0.5s forwards; } #hide { height:120px; overflow:hidden; transition:all 1s ease; } .flexer { color: white; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; background: #37474F; height: 300px; display: flex; flex-direction: column; justify-content: center; align-items: center; } h3, h1 { margin: 5px; } .seperator { width: 30%; height: 1px; border-bottom: 1px solid rgba(51, 51, 51, 0.3); margin-bottom: 7px; } h3 { font-weight: 200; } /* attempt from http://stackoverflow.com/questions/18364938/how-to-animate-elements-move-with-css3-transitions-after-hiding-some-element */ // Didn't seem to work .transition { -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; } @keyframes fadeout { from { opacity: 1; } to { opacity: 0; } } input { height: 25px; border-radius: 5px; border: none; margin-bottom: 3px; padding: 5px 5px 5px 10px; font-size: 14px; font-weight: 700; background: #333; color: white; }
<div class="flexer"> <h3 class="transition"> Site Name </h3> <div class="seperator"></div> <div id="hide"> <input type="text" placeholder="Username"><br> <input type="password" placeholder="Password"><br> <input type="password" placeholder="Password Confirmation"><br> </div> <h1 class="transition"> Welcome </h1> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.