HTML CSS examples for CSS Animation:Animation Control
Click to start animation
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> body {<!--from www . ja v a 2 s . c om--> margin: 0px; padding: 0px; background-color: #d9d9d9; font-family: Sans-Serif; font-weight: 100; color: #ffffff; } .container { position: absolute; margin: 0px; padding: 0px; left:50px; top: 50px; width: 500px; height: 150px; background: #333333; xoverflow: hidden; /* The slide effect works when this is removed. */ clip: rect(auto, auto, auto, auto); border: 2px solid #000000; } #id1 { position: absolute; margin: 0px; padding: 0px; top: 0px; left: 0px; margin-left: 500px; width: 500px; height: 150px; background: #008080; } #button { position: absolute; top: 15px; left: 50px; width: 80px; height: 25px; padding: 5px 0px 0px 0px; margin: 0px; text-align: center; background: #ffffff; } #id1:target { -webkit-animation: slide 0.5s ease-in forwards; } @-webkit-keyframes slide { 0% {margin-left: 500px; top: 0px;} 100% {margin-left: 0px; top: 0px;} } </style> </head> <body> <div class="container"> <p>div 1</p> <div id="id1"> <p>div 2</p> </div> </div> <div id="button"> <a href="#id1">click</a> </div> </body> </html>