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

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

http://island-web.jp/air/lesson/css3/swing/index.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>swing</title>
<style>
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); }
}
&#8203;</style>
</head>
<body>
<figure class="swing"><img src="01.jpg"></figure>&#8203;
</body>
</html>
colissさんのブログより

colissさんの記事のソースを、まるっとマネさせていただきました。
本当に動いて、すごく嬉しい〜♪

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