CSS3を使って画像をスライド（平行移動）させてみる

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

使用するCSSは

<style type="text/css">
.slider {
    animation: slider1 4s infinite;
}

@-webkit-keyframes slider1 {
    0%, 100% { transform:translateX(0); }
    50% { transform:translateX(360px); }
}
@-moz-keyframes slider1 {
    0%, 100% { transform:translateX(0); }
    50% { transform:translateX(360px); }
}
@-ms-keyframes slider1 {
    0%, 100% { transform:translateX(0); }
    50% { transform:translateX(360px); }
}
@-o-keyframes slider1 {
    0%, 100% { transform:translateX(0); }
    50% { 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>

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

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

• 作者: 谷拓樹
• 出版社/メーカー: インプレス
• 発売日: 2014/07/24
• メディア: Kindle版
• この商品を含むブログ (1件) を見る

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

• 作者: 狩野祐東
• 出版社/メーカー: SBクリエイティブ
• 発売日: 2015/04/10
• メディア: Kindle版
• この商品を含むブログを見る