One approach to consider is combining both the transition and animation properties. Alternatively, you can solely utilize the animation property for this particular case:
#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.5s 0.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;
}
}
Feel free to test the demo using webkit-based browsers. For compatibility with other browsers, remember to add appropriate prefixes. It's essential to note that the animation will execute only after the completion of the transition, requiring the use of animation-delay.
In the provided demo, negative margins play a role in centering the div. Although effective, adjusting these values when altering the div's size can be cumbersome. An alternative method involves utilizing the translate transform, offering superior div centering functionality but necessitating browser support for the transform feature. Explore another demo showcasing the application of translate for div centering Demo 2.
Additionally, a solution leveraging solely the animation property is presented below, employing the transition solely for animating color changes.
UPDATE: The previously demonstrated solutions function effectively on browsers supporting the animation feature. Nonetheless, it's worth noting that IE9 lacks this support. To address this limitation, a workaround involving multi-transitions is proposed. The initial transition lasting 0.5s paves the way for the subsequent transition commencing after 0.5s. For animating the div from the center to the bottom-right corner, integrate a transition for the translate transform as outlined below:
#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.5s 0.5s ease;
-ms-transition: all 0.5s ease, -ms-transform 0.5s 0.5s ease;
-moz-transition: all 0.5s ease, -moz-transform 0.5s 0.5s ease;
transition: all 0.5s ease, transform 0.5s 0.5s ease;
}
#click {
width: 100px;
height: 50px;
background-color: cornflowerblue;
color: white;
font-weight: bold;
text-align: center;
}