How to animate a div using css3

Question

I have following code:

$('.div-1').on('click', function() {
  $('.block').addClass('animated');
});
$('.div-2').on('click', function() {
  $('.block2').addClass('animated');
});

html,
body {
  height: 100%;
}
.div-1 {
  display: inline-block;
  padding: 40px;
  background: tomato;
}
.div-2 {
  display: inline-block;
  padding: 40px;
  background: tan;
}
.block2 {
  background: green;
}
.animated {
  -webkit-animation: animateThis 0.2s ease;
  animation: animateThis 0.2s ease;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.block {
  background: red;
}
@-webkit-keyframes animateThis {
  0% {
    height: 0;
    width: 0;
  }
  100% {
    height: 100%;
    width: 100%;
  }
}
keyframes animateThis {
  0% {
    height: 0;
    width: 0;
  }
  100% {
    height: 100%;
    width: 100%;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div-1"></div>
<div class="div-2"></div>

<section class="block"></section>
<section class="block2"></section>

Here is a PEN

What I am trying to do: when clicking on div-1 or div-2 the corresponding animation for sections block and block2 should originate from the the bottom center of div-1 or div-2. It currently starts animating from the left corner.

My question is: how do I get the animation to originate from the bottom center of div-1 or div-2 and not the left corner. Also, when clicking on div-1 or div-2 the currently open section should close (with the reverse animation of how it is opened) and the corresponding clicked div should open as a fresh animation. How can this be done through scripting? I do not want to use external libraries (animate.css). I have tried several approaches to this but I have no idea how to do it as I cannot work out the logic.

Answer 1

Use a separate animation to hide the blocks

 @-webkit-keyframes shrinkThis {
      0% {
        height: 100%;
        width: 100%;
  }

  100% {
    height: 0;
    width: 0;
  }
} 

And you can use a call back to know that the block is hidden and then expand the corresponding block

$(".block").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", 
  function() {
      $('.block2').removeClass('shrink');
      $('.block2').addClass('expand');
      $('.block2').unbind();
  });

Here is the PEN

Edit for positioning: You can use transform-origin as pointed out by someone. But it will work only with transforms like scale, translate etc.

The block's css should be something like following:

.block {
  /*background: red;*/
  position:absolute;
  border:solid 1px;
    height: 100%;
    width: 100%;
  transform-origin: 20px 0%;
-webkit-transform-origin: 20px 0%;
}

The transform is using scale instead of modifying height and width:

@-webkit-keyframes animateThis {
  0% {
    -webkit-transform: scale(0.1,0.1);
  }
  100% {
    -webkit-transform: scale(1,1);
  }
} 

Here is the updated PEN

Area to improve: The transform origin should be calculated dynamically.

Answer 2

If you want to play around with the starting point of your animation like you asked, you can use transform-origin CSS property. Write

transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;

to make it start from the bottom center.

And to use the reversed animation, just add the keyword alternate after your animation directives. It will play the animation reverted after being completed.

Exampe :

.animated {
  -webkit-animation: animateThis 0.2s ease alternate;
  animation: animateThis 0.2s ease alternate;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}