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: width 1s, height 5s;
    -moz-transition: width 1s, height 5s;
    -ms-transition: width 1s, height 5s;
    -o-transition: width 1s, height 5s;
    transition: width 1s, height 5s;
}
.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;
}