CSS Transition

CSS Transistion, syntax untuk mengatur waktu transisi atau perubahan ketika suatu objek yang di setting dengan CSS akan berubah, misalnya pada seperti perintah hover.
Untuk lebih jelasnya, di bawah ini ada gambar yang di setting dengan hover tanpa transition,
syntaxnya :

.gbpost{
width:200px;
   height:200px;
   border-radius:100px;
border: solid 0px #ccc;
   border-style: solid;
   border-color: #666;
   background-color:#ccc;
}
.gbpost:hover{
width:200px;
   height:200px;
   border-radius:10px;
   border: solid 0px #ccc;

   border-style: solid;
   border-color: #666;
   background-color:#ccc;
}

.

Dan yang di bawah ini dengan transition, syntaxnya :

.gbpost2{
width:200px;
   height:200px;
   border-radius:100px;
border: solid 0px #ccc;
   border-style: solid;
   border-color: #666;
   background-color:#ccc;

   transition:border-radius .5s ease;
}
.gbpost2:hover{
width:200px;
   height:200px;
   border-radius:10px;
   border: solid 0px #ccc;

   border-style: solid;
   border-color: #666;
   background-color:#ccc;
}