Edit in JSFiddle

<div class="transitions">
    <p>Transitions</p>
</div>

.transitions {
    width:200px;
    height:100px;
    border:1px solid #000;
    background-color:grey;
    float: left;
    display:block;
    margin:30px;
-webkit-transition: all 500ms cubic-bezier(1.000, 0, 1.000, 0); /* older webkit */
-webkit-transition: all 500ms cubic-bezier(1.000, -0.090, 1.000, -0.240); 
   -moz-transition: all 500ms cubic-bezier(1.000, -0.090, 1.000, -0.240); 
     -o-transition: all 500ms cubic-bezier(1.000, -0.090, 1.000, -0.240); 
        transition: all 500ms cubic-bezier(1.000, -0.090, 1.000, -0.240); /* custom */
}
.transitions:hover {
    width: 300px;
    height: 200px;
}
p {
    color:white;
    text-align:center;
    margin:40px auto;
    -webkit-transition: color 2s, font 0.5s;
    -moz-transition: color 2s, font 0.5s;
    -ms-transition: color 2s, font 0.5s;
    -o-transition: color 2s, font 0.5s;
    transition: color 2s, font 0.5s;
}
.transitions:hover p {
    color:red;
    font: normal 28px Calibri, Arial, Sans-Serif;
    -webkit-transition: color 2s, font 0.5s;
    -moz-transition: color 2s, font 0.5s;
    -ms-transition: color 2s, font 0.5s;
    -o-transition: color 2s, font 0.5s;
    transition: color 2s, font 0.5s;
}