HTML CSS examples for CSS Animation:Fly
Hover to show banner with animation
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> #myDiv<!-- w w w . j a v a 2s . com--> { display: none; opacity: 0; padding: 5px; color: #600; background-color: #CEC; -webkit-transition: 350ms display-none-transition; } #parent:hover>#myDiv { opacity: 1; display: block; } #parent { background-color: #000; color: #FFF; width: 500px; height: 500px; padding: 5px; } @-webkit-keyframes display-none-transition { 0% { display: none; opacity: 0; } 1% { display: block; opacity: 0; } 100% { display: block; opacity: 1; } } </style> </head> <body> <div id="parent"> Hi this is a test <div id="myDiv"> Hello! </div> </div> </body> </html>