how do I animate div's resizing when page is first open

Question

so when the page first opens it is fully occupied by the first div, i then want it to shrink into four equal divs of different colours automatically. i have been trying to crack this for a while, here's my code so far:

div {
  float: left;
}

#div1 {
  width: 100%;
  height: 100%;
  background: #f24c43;
  animation-name: shrink;
  animation-duration: 4s;
}

#div2 {
  width: 0%;
  height: 0%;
  background: #ffe605;
  animation-name: grow;
  animation-duration: 4s;
}

#div3 {
  width: 0%;
  height: 0%;
  background: #e89b30;
  animation-name: grow;
  animation-duration: 4s;
}

#div4 {
  width: 0%;
  height: 0%;
  background: #870e40;
  animation-name: grow;
  animation-duration: 4s;
}

<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
<div id="div4">
</div>

@constantvigilance np, not sure if that's what you were going for or not. didn't want to answer if I was way off the mark. lemme know if you'd like me to submit that as an answer. — Michael Coker, Mar 15 '17 at 19:26
@MichaelCoker almost perfect but is there a way to do it without making the wrap 200% of the screen size?, im coding for mobile you see — constant vigilance, Mar 15 '17 at 19:56

score 1 · Accepted Answer · answered Mar 15 '17 at 18:20

You can add a container around your div elements and use "display: flex;" on it in order to have the items align properly and shrink/grow to your "%" based width/heights.

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}


/*animations*/

@keyframes shrink {
  from {
    width: 100%;
    height: 100%;
  }
  to {
    width: 50%;
    height: 50%;
  }
}

@keyframes grow {
  from {
    width: 0%;
    height: 0%;
  }
  to {
    width: 50%;
    height: 50%;
  }
}


/*css*/

#flex {
  display: flex;
  height: 100%;
  width: 100%;
}

#div1 {
  width: 100%;
  height: 100%;
  background: #f24c43;
  animation-name: shrink;
  animation-duration: 4s;
}

#div2 {
  width: 0%;
  height: 0%;
  background: #ffe605;
  animation-name: grow;
  animation-duration: 4s;
}

#div3 {
  width: 0%;
  height: 0%;
  background: #e89b30;
  animation-name: grow;
  animation-duration: 4s;
}

#div4 {
  width: 0%;
  height: 0%;
  background: #870e40;
  animation-name: grow;
  animation-duration: 4s;
}

<html>
<head>
    <link rel="stylesheet" type="text/css" href="../css/home.css">
    <title>GymBro2</title>
</head>
<body>
  <div id="flex">
    <div id="div1">
    </div>
    <div id="div2">
    </div>
    <div id="div3">
    </div>
    <div id="div4">
    </div>
  </div>
</body>
</html>

kind of like that but i was going for a 2 by 2 kind of thing rather then 4 in a row. also after the animation completes it jumps back to 1 large red square again — constant vigilance, Mar 15 '17 at 19:59

how do I animate div's resizing when page is first open

1 Answers1