Entrance animation with pushing other elements - CSS only

Question

Please see this fiddle:

div {
  width:300px;
}
.upper {
  height:50px;
  background-color: red;
}
.middle {
  height: 100px;
  background-color: green;
}

.bottom {
  height: 900px;
  background-color: purple;
}

<div class="upper">

</div>
<div class="middle">

</div>
<div class="bottom">

</div>

I need a way to make an entrance for the green element: At first, it doesn't appear, then it appears and grows in-place and it pushes down the red element.

The only solution I found is to animate max-height property from 0px to other value. However, this solution is not the best because it causes layout thrashing

So I need to figure out how is it possible to do this with transform somehow.

another information - the height of the green element is not known, so the solution preferably not hard code its height.

add your code in the question. not with an external link – xmaster Dec 10 '19 at 08:07 — xmaster, Dec 10 '19 at 08:07

score 0 · Answer 1 · answered Dec 10 '19 at 08:46

0

A possible solution could be using transform: scale

transform: scale(height, width);

answered Dec 10 '19 at 08:46

Crashtor

1,249
1
13
21

score 0 · Answer 2 · answered Dec 10 '19 at 09:16

I think this is what you were looking for, a sliding effect

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>

<style type="text/css">
 div.same{
  width: 400px;
  height: 50px;
  margin: 30px;
  border: 5px solid yellow;
  display: none;
 }

 div#div1{
  background-color: orange;
 }
 div#div2{
  background-color: pink;
 }

 div#div3{
  background-color: purple;
 }
 div#div4{
  background-color: green;
 }
 div#div5{
  background-color: red;
 }
 div#div6{
  background-color: blue;
 }


</style>

<body>
 
<div class="same" id="div1"></div>
<div class="same" id="div2"></div>
<div class="same" id="div3"></div>
<div class="same" id="div4"></div>
<div class="same" id="div5"></div>
<div class="same" id="div6"></div>


 
</body>

<script type="text/javascript">
 
 $(document).ready(function(){
  for(var i=0;i<6;i++)
  {
   var theid = $("#div"+i);
   var thetime = 800 *i;
   $(theid).show(thetime); // or use .fadeIn()
   thetime = thetime * i;
  }
 });



</script>
</html>

Entrance animation with pushing other elements - CSS only

2 Answers2