Css Transition To Bottom-right From Center

I have a requirement in which the container is stretching all over the page. when I click on the container, it should become smaller. This should happen with animation. I tried css

Solution 1:

You can try combining both transition and animation. Even you can use only animation here:

#main {
  position: fixed;
  height: 100%;
  width: 100%;
  left:0;
  top:60px;        
  background-color: red;
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;    
  -moz-transition: all 0.5s ease;
}
#click:hover + #main {
  position: fixed;
  width: 100px;
  height: 50px;
  left: 50%;
  top: 50%;
  margin-left:-50px;
  margin-top:-25px;
  background-color: green;
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -webkit-animation: to-bottom-right 0.5s0.5s forwards;
}
#click {
  width: 100px;
  height: 50px;
  background-color: cornflowerblue;
  color: white;
  font-weight: bold;
  text-align: center;
}


@-webkit-keyframes to-bottom-right {    
  100% {
    left: 100%;
    top: 100%;
    margin-left:-100px;
    margin-top:-50px;
  }
}

Please test the demo using webkit-based browsers, you can add prefixes yourself for other browsers. Note that the animation will run after the transition has been done, so we have to use animation-delay.

Demo.

The demo above uses negative margins to center the div, its advantage is well supported but we have to change the negative margins' values when changing the size of the div. Another way is using translate transform, this will center the div greatly but it requires browsers to support transform feature. Here is the demo using translate instead to center the div Demo 2.

Here is another solution using only animation, the transition is just used for animating the color changing.

Demo 3.

UPDATE: All the demos above work perfectly for browsers supporting animation feature. However it's a pity that IE9 does not support this feature. I've tried using some workaround and I've found a solution by using multi-transition. The first transition lasts for 0.5s while the second transition will start after 0.5s. To animate the div from center to bottom-right corner, you have to use transition for the translate transform. Here is the code it should be:

#main {
  position: fixed;
  height: 100%;
  width: 100%;
  left:0;
  top:60px;        
  background-color: red;
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;    
  -moz-transition: all 0.5s ease;
}
#click:hover + #main {
  position: fixed;
  width: 100px;
  height: 50px;
  left: 50%;
  top: 50%;
  margin-left:-50px;
  margin-top:-25px;
  background-color: green;   

  -webkit-transform:translate(50vw , 50vh) translate(-50%,-50%);
  -ms-transform:translate(50vw , 50vh) translate(-50%,-50%);
  -moz-transform:translate(50vw , 50vh) translate(-50%,-50%);
  transform:translate(50vw , 50vh) translate(-50%,-50%);
  -webkit-transition: all 0.5s ease, -webkit-transform 0.5s0.5s ease;
  -ms-transition: all 0.5s ease, -ms-transform 0.5s0.5s ease;
  -moz-transition: all 0.5s ease, -moz-transform 0.5s0.5s ease;
  transition: all 0.5s ease, transform 0.5s0.5s ease;    
}
#click {
  width: 100px;
  height: 50px;
  background-color: cornflowerblue;
  color: white;
  font-weight: bold;
  text-align: center;
}

Updated Demo.

Solution 2:

Do you mean like this: fiddle

Here's what I changed:

#main {
    position: absolute;
    bottom: 0;
    right: 0;
    height: calc(100% - 100px);
    width: 100%;
    background-color: red;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
}
#click:hover + #main {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100px;
    height: 50px;
    margin-top: 50px;
    background-color: green;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
}

I set the position to absolute and the bottom and right properties to 0. Since the element is not in the document flow any more, I used calc to move set the element 100px smaller than the height.

Solution 3:

Well i tried

http://jsfiddle.net/tyuAk/15/

in jquery tho

$("#click").hover(function() {
    setTimeout('$("#main").delay(500).attr("id","newclass");' ,500);
});#main {position:absolute;height:100%;width:100%;background-color:red;}#newclass {position:absolute;height:50px;width:100px;margin-top:25%;background-color:green;}#click:hover + #main {width:100px;height:50px;margin-top:25%;background-color:green;transition-property:width,height,margin;transition:0.5sease;}#click {width:100px;height:50px;background-color:cornflowerblue;color:white;font-weight:bold;text-align:center;}#click:hover + #newclass {margin-top:0px;transition:all0.5sease;}