HTML CSS examples for CSS Animation:Slide
Button pressed effect with transition: transform animation
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> #nav-bar li:not(.active-page):active { transform:translate( 11px, 11px ); } ul {<!-- ww w .j a v a 2 s . c o m--> padding:0; } li { cursor:pointer; padding:.6em 2em; display:inline-block; font:2em"Segoe UI"; border-radius:.6em; transition:transform .6s, background .6s; } li.active-page { color:Chartreuse; background:yellow; } li:not(.active-page):hover { color:blue; background:pink; } </style> </head> <body> <div id="nav-bar"> <ul> <li class="active-page">Lor</li> <li>Lor</li> <li>Lorem</li> </ul> </div> </body> </html>