読者です 読者をやめる 読者になる 読者になる

攻めは飛車角銀桂守りは金銀三枚

ITとアコースティックギター、そして日常のひとこま。

CSS3を使って画像をスライド(平行移動)させてみる【修正しました】

スポンサーリンク


昨日書いた記事ですが、「千日 (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>



うまくスライド(平行移動)しましたか?

スラスラわかるCSSデザインのきほん スラスラわかるきほんシリーズ

スラスラわかるCSSデザインのきほん スラスラわかるきほんシリーズ