Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
  #image  {
    opacity: 0;
    width: 150px;
    -webkit-animation: animationFrames linear 2s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode:forwards;
  }
  
@-webkit-keyframes animationFrames {
  0% {
 
  }
  50% {
    opacity: 1;
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  75% {
    margin-top: 0;
    width: 150px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  100% {
    margin-top: 300px;
    opacity: 1;
    width: 250px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
}
  
</style>
</head>
<body>
    <img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" id="image">
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers