HTML CSS examples for CSS Animation:Morph
Morph animation
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .container{<!-- ww w. j a v a 2 s.co m--> display:block; position:relative; overflow:hidden; width:200px; height:200px; background:#ccc; } .insideel{ display:block; position:absolute; overflow:hidden; height:20px; background:white; border:1px solid #ccc; } .el1{ width:50px; top:-50px; left:-50px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .el2{ top:-50px; right:-50px; width:50px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .el3{ bottom:-30px; width:200px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .container:hover .el1 { top: 0px; left: 0px; } .container:hover .el2 { top: 0px; right: 0px; } .container:hover .el3 { bottom: 20px; } </style> </head> <body> <div class="container"> <div class="el1 insideel"> el1 </div> <div class="el2 insideel"> el2 </div> <div class="el3 insideel"> el3 </div> </div> </body> </html>