HTML CSS examples for CSS Animation:Hover
Reverse Animation of onHover
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> @charset "UTF-8"; * {<!-- w w w . j ava2s . c o m--> margin: 0; padding: 0; } html, body, #container { height: 100%; font-size:24px; color:white; } header { height: 50px; background: gray; } main { height: calc(100% - 50px); background: green; } .half { height: 50%; position: relative; } .half:first-child { border-bottom:10px; border-left:0px; border-right:0px; border-top:0px; border-bottom-color:white; border-style:solid; } #containertop { background: blue; height: 100%; } .half:first-child > #containertop{ position:absolute; z-index:1; width:100%; top:0px; transition: 2s all ease; } .half:first-child:hover > #containertop{ top: -100%; } .half:last-child { background: green; border-top:10px; border-bottom:0px; border-left:0px; border-right:0px; border-top-color:white; border-style:solid; } .titletextup{ text-align:center; } .titletextdown{ text-align:center; } #triangle-facing-top { display: inline-block; margin: 72px; border-right: 24px solid; border-bottom: 24px solid; width: 120px; height: 120px; transform: rotate(-135deg); display: inline-block; -webkit-transform:rotate(-135deg); -moz-transform:rotate(-135deg); -o-transform:rotate(-135deg); color: white; } #triangle-facing-bottom { display: inline-block; margin: 72px; border-right: 24px solid; border-bottom: 24px solid; width: 120px; height: 120px; transform: rotate(45deg); display: inline-block; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); color:white; } </style> </head> <body> <section class="half"> <div id="containertop"> <div class="titletextup"> UP <br> <div id="triangle-facing-top"></div> </div> </div> </section> <section class="half"> <div class="titletextdown"> <div id="triangle-facing-bottom"></div> <br> DOWN </div> </section> </body> </html>