昨日書いた記事ですが、「千日 (id:sennich)さん」や「マネー報道著者 (id:MoneyReport)」から「動かんぞ！！」とご指摘いただいたので、サッカー日本代表の勝利のお祝いを兼ねて原因を調査して修正しました。

お詫びも兼ねて移動速度を高速化してあります。
（これで動かなければもう・・・あきらめてください）

CSS3で画像を画像をスライド（平行移動）させる

使用するCSSは

<style type="text/css">
.slider {
    -webkit-animation: slider1 1.5s linear infinite;
    -moz-animation: slider1 1.5s linear infinite;
    -ms-animation: slider1 1.5s linear infinite;
    -o-animation: slider1 1.5s linear infinite;
    animation: slider1 1.5s linear infinite;
}

@-webkit-keyframes slider1 {
    0%, 100% { -webkit-transform:translateX(0); }
    50% { -webkit-transform:translateX(360px); }
}
@-moz-keyframes slider1 {
    0%, 100% { -moz-transform:translateX(0); }
    50% { -moz-transform:translateX(360px); }
}
@-ms-keyframes slider1 {
    0%, 100% { -ms-transfor:translateX(0); }
    50% { -ms-transfor:translateX(360px); }
}
@-o-keyframes slider1 {
    0%, 100% { -o-transform:translateX(0); }
    50% { -o-transform:translateX(360px); }
}
@keyframes slider1 {
    0%, 100% { transform:translateX(0); }
    50% { transform:translateX(360px); }
}
</style>

です。

これを「はてなブログ」の「デザインCSS」に貼りつければ完成です。

注意事項としては、わたしはこのCSSを記事の中に直接書いて回転させているので

<style type="text/css">
    ・
    ・
    ・
</style>

で囲んでますが「デザインCSS」に貼りつける場合は不要のはずです。

<img src="スライドさせる画像のURL" class="slider"></img>

うまくスライド（平行移動）しましたか？