How can I animate elements moving after hiding other elements affecting their positioning

Question

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

score 0 · Answer 1 · answered Nov 07 '16 at 05:25

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.

Ibrahim · Answer 2 · 2016-11-07T05:45:02.080

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>

prasanth · Answer 3 · 2016-11-07T05:43:25.627

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>

How can I animate elements moving after hiding other elements affecting their positioning

3 Answers3