HTML CSS examples for CSS Widget:Hover Animation
Keep transition in effect after hover
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> html<!--from ww w .ja v a 2 s . c o m--> { background-color:Chartreuse; } #header { background-color:yellow; height:21%; margin-left:-2%; margin-top:-2%; padding-top:4%; width:102.7%; box-shadow:6px 11px 31px blue; display:inline-block; } #sn { margin-left:2%; margin-bottom:-2%; color:pink; text-decoration:none; font-size:401%; box-shadow:6px 11px 31px OrangeRed; border-radius:11px; transition:all 0.6s; transition-delay:all 10000000s; } #header:hover #sn { color:grey; box-shadow:6px 11px 31px BlueViolet; } .menu { display:inline-block; color:Chartreuse; padding-left:6%; transition:all 0.6s; text-decoration:none; list-style:none; } li { color:yellow; } </style> </head> <body> <div id="header"> <a id="sn" href="home.html">Lorem ipsum</a> <a class="menu" href="forums.html"> <li>Lorem </li> </a> <a class="menu" href="videos.html"> <li>Lorem </li> </a> <a class="menu" href="about.html"> <li>Lorem</li> </a> <a class="menu" href="team.html"> <li>Lorem ipsum d</li> </a> <a class="menu" href="login.html"> <li>Lorem</li> </a> </div> </body> </html>