HTML CSS examples for CSS Animation:Hover
Animate a transition from opacity 0 upon hover
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .with-dropdown-list {<!--from ww w . ja v a2 s . c o m--> position: relative; } .with-dropdown-list ul { position: absolute; visibility: hidden; opacity: 0; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; -webkit-transform: translateY(-20px); transform: translateY(-20px); } .with-dropdown-list:hover ul { visibility: visible; opacity: .9; -webkit-transform: translateY(0); transform: translateY(0); } </style> </head> <body> <ul id="main"> <li class="with-dropdown-list"> a <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </li> </ul> </body> </html>