Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <figure class="swing">
    <img src="http://placekitten.com/200/160?image=12">
    <figcaption>
      OHAI. SWEENGIN&rsquo;
    </figcaption>
  </figure>
</body>
</html>
​
 
.swing {
    display: inline-block;
    -webkit-transform-origin: center -20px;
    -moz-transform-origin: center -20px;
    transform-origin: center -20px;
    -webkit-animation: swing ease-in-out 2s infinite;
    -moz-animation: swing ease-in-out 2s infinite;
    -ms-animation: swing ease-in-out 2s infinite;
    animation: swing ease-in-out 2s infinite;
}
​
.swing::after {
    content: '';
    display: block;
    position: absolute;
    top: -10px;
    left: 50%;
    margin-left: -10px;
    width: 20px;
    height: 20px;
    -webkit-transform: rotate( 45deg );
    -moz-transform: rotate( 45deg );
    transform: rotate( 45deg );
    border-style: solid;
    border-color: #666;
    border-width: 1px 0 0 1px;
}
​
.swing::before {
    content: '';
    display: block;
    width: 5px;
    height: 5px;
    background-image: -webkit-linear-gradient( top, #f1f1f1 0%, #333 80%, #000 95% );
    background-image: -moz-linear-gradient( to bottom, #f1f1f1 0%, #333 80%, #000 95% );
    background-image: linear-gradient( to bottom, #f1f1f1 0%, #333 80%, #000 95% );
    border-radius: 50%;
    border: 1px solid #666;
    position: absolute;
    top: -15px;
    left: 50%;
    margin-left: -3px;
}
​
.swing figcaption {
    padding: 10px;
    text-align: center;
    color: #333;
    font: 12px arial;
    backround-color: black;
    background-image: -webkit-linear-gradient( top, #f1f1f1 80%, #CCC );
    background-image: -moz-linear-gradient( to bottom, #f1f1f1 80%, #CCC );
    background-image: linear-gradient( to bottom, #f1f1f1 80%, #CCC );
}
​
@-webkit-keyframes swing {
    0% { 
        -webkit-transform: rotate( -5deg );
        box-shadow: -10px 10px 10px rgba(0,0,0,.15);
    }
    50% { 
        -webkit-transform: rotate( 5deg );
        box-shadow: 10px 10px 10px rgba(0,0,0,.15);
    }
    100% { 
        -webkit-transform: rotate( -5deg ); 
        box-shadow: -10px 10px 10px rgba(0,0,0,.15);
    }
}
​
@-moz-keyframes swing {
    0% { 
        -moz-transform: rotate( -5deg );
        box-shadow: -10px 10px 10px rgba(0,0,0,.15);
    }
    50% { 
        -moz-transform: rotate( 5deg );
        box-shadow: 10px 10px 10px rgba(0,0,0,.15);
    }
    100% { 
        -moz-transform: rotate( -5deg ); 
        box-shadow: -10px 10px 10px rgba(0,0,0,.15);
    }
}
​
@-ms-keyframes swing {
    0% { 
        transform: rotate( -5deg );
        box-shadow: -10px 10px 10px rgba(0,0,0,.15);
    }
    50% { 
        transform: rotate( 5deg );
        box-shadow: 10px 10px 10px rgba(0,0,0,.15);
    }
    100% { 
        transform: rotate( -5deg ); 
        box-shadow: -10px 10px 10px rgba(0,0,0,.15);
    }
}
​
@keyframes swing {
    0% { 
        transform: rotate( -5deg );
        box-shadow: -10px 10px 10px rgba(0,0,0,.15);
    }
    50% { 
        transform: rotate( 5deg );
        box-shadow: 10px 10px 10px rgba(0,0,0,.15);
    }
    100% { 
        transform: rotate( -5deg ); 
        box-shadow: -10px 10px 10px rgba(0,0,0,.15);
    }
}
Output

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

Dismiss x
public
Bin info
jonathansampsonpro
0viewers