[CSS]画像をゆらゆらと振り子のようにアニメーションで揺らすスタイルシート

JavaScriptは使用せず、CSS3アニメーションで画像を振り子のように揺らすスタイルシートを紹介します。

Swinging image with CSS animations

画像はネコの写真だけで、枠やピンや糸はスタイルシートです。
実装は下記のようになります。

HTML

<figure class="swing"><img src="http://placekitten.com/g/200/200"></figure>

CSS

body {background: #9cf;}
.swing {
    -moz-animation: swing linear 2s infinite;
    -moz-transform-origin: center -20px 0;
    -webkit-animation: swing linear 2s infinite;
    -webkit-transform-origin: center -20px 0;
    -ms-animation: swing linear 20s infinite;
    -ms-transform-origin: center -20px 0;
    -o-animation: swing linear 20s infinite;
    -o-transform-origin:center -20px 0;
    animation: swing linear 20s infinite;
    transform-origin: center -20px 0;
    display: block;
    float:left;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
}
.swing img {
    border: 5px solid #f8f8f8;
    z-index: 2;
    display: block;
}
.swing:after{
    content: '';
    border: 1px solid #999;
    top: -10px;
    z-index: 0;
    left: 50%;
    width: 20px;
    height: 20px;
    border-bottom: none;
    border-right: none;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
}
.swing:before{
    content: '';
    top: -14px;
    z-index: 5;
    left: 54%;
    width: 5px;
    border-radius: 50% 50%;
    background: #000;
    height: 5px;
    position: absolute;
}

@-moz-keyframes swing {
    0% { -moz-transform: rotate(0deg) }
    25% { -moz-transform: rotate(3deg); }
    50% { -moz-transform: rotate(0deg); }
    75% { -moz-transform: rotate(-3deg); }
    100% { -moz-transform: rotate(0deg); }
}
@-webkit-keyframes swing {
    0% { -webkit-transform: rotate(0deg); }
    25% { -webkit-transform: rotate(3deg); }
    50% { -webkit-transform: rotate(0deg); }
    75% { -webkit-transform: rotate(-3deg); }
    100% { -webkit-transform: rotate(0deg); }
}    
@-o-keyframes swing {
    0% { -o-transform: rotate(0deg); }
    25% { -o-transform: rotate(3deg); }
    50% { -o-transform: rotate(0deg); }
    75% { -o-transform: rotate(-3deg); }
    100% { -o-transform: rotate(0deg); }
}
@-ms-keyframes swing {
    0% { -ms-transform: rotate(0deg); }
    25% { -ms-transform: rotate(3deg); }
    50% { -ms-transform: rotate(0deg); }
    75% { -ms-transform: rotate(-3deg); }
    100% { -ms-transform: rotate(0deg); }
}
@keyframes swing {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(3deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-3deg); }
    100% { transform: rotate(0deg); }
}