HTML CSS examples for CSS Animation:Fly
Fly animation by animating left margin
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <style id="compiled-css" type="text/css"> div {<!-- w w w . j ava 2 s . co m--> width: 100px; height: 100px; background-color: red; position: relative; -webkit-animation-name: example; /* Chrome, Safari, Opera */ -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */ animation-name: animIn; animation-duration: 4s; } @keyframes animIn { 10% { margin-left: 10%; opacity: 0; } 50% { opacity: 1; } 90% { margin-left: 90%; opacity: 0; } } </style> </head> <body> <div> </div> </body> </html>