I have a division in which i'll be having dynamic numbers of colorful blocks(that too divisions) at various instances. On clicking the box, i want them to expand & cover whole screen. the problem is, while boxes are expanding, they are expanding at there own position & not shifting in the screen.. I used:

.elemented1 {
   width: 100%;
   height: 80%;
   -webkit-animation: elemen1 0.3s;
   border: 0px;
}

@-webkit-keyframes elemen1 {

   from {
      width: 49.6%;
      height: 39.6%;
   }

   to {
      width: 100%;
      height: 80%;
   }
}

This is working fine but i have to put blocks dynamically. I cant write animations for individual blocks as they will be of different sizes.