HTML CSS examples for CSS Animation:Zoom
Zooming animations
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .screen {<!-- ww w . j a v a2 s. c o m--> position: fixed; width: 100%; height: 100%; } .card { width: 200px; background: #ccc; position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%); } @keyframes kf_anim { 0% { transform: translate(-50%, -50%) rotateY(315deg); } 100% { transform:translate(-50%, -50%) rotateY(360deg); } } .card_anim { animation: kf_anim 0.5s forwards; } </style> </head> <body> <div class="screen"> <div class="card card_anim"> content </div> </div> </body> </html>