HTML CSS examples for CSS Animation:Animation Control
Sync CSS Animations Across Multiple Elements
<html lang="en"> <head> <style> @-webkit-keyframes bounce {<!--from ww w.java 2 s .c om--> 0% {-webkit-transform: translateY(0px);} 25% {-webkit-transform: translateY(-2px);} 50% {-webkit-transform: translateY(-4px);} 75% {-webkit-transform: translateY(-2px);} 100% {-webkit-transform: translateY(0px);} } #bouncy01, #bouncy02, #bouncy03{ text-align:center; width: 50px; margin:10px; float: left; background: #ff0000; padding: 10px; border: 1px solid #777; } #bouncy01, #bouncy02{ -webkit-animation:bounce 0.25s ease-in-out infinite; } #bouncy01 { } #bouncy02 { background: #ffff00; visibility:hidden; } #bouncy03 { background: #ffff00; visibility:visible; margin-left:-82px; } .bounce-switch:hover #bouncy02{ visibility:visible; } .bounce-switch:hover #bouncy03{ visibility:hidden; } </style> </head> <body translate="no"> <div id="bouncy01"> Drip </div> <div class="bounce-switch"> <div id="bouncy02"> droP </div> <div id="bouncy03"> droP </div> </div> </body> </html>