The list of transition property are given below:
div { transition: <property> <duration> <timing-function> <delay>; }
<!DOCTYPE html> <html> <head> <style> h1 { color: #fc0885; text-align:center; } h3 { text-align:center; color:darkred; } input[type=text] { width: 100px; -webkit-transition: width .35s ease-in-out; transition: width .35s ease-in-out; } input[type=text]:focus { width: 250px; } </style> </head> <body> <h1>Bajarangi soft</h1> <h3>Search: <input type="text" name="searchbox"></h3> </body> </html>
<!DOCTYPE html> <html> <head> <style> h1 { color:Green; } div { width: 1px; height: 0px; text-align:center; background: Green; -webkit-transition: width 2s, height 2s; transition: width 2s, height 2s; } div:hover { width: 300px; height: 240px; } </style> </head> <body> <h1>Bajarangi soft</h1> <div> <img src= "b1.jpg" align="middle"></div> </body> </html>