(cache) CSS3を使って画像に反復横飛びをさせてみる - 攻めは飛車角銀桂守りは金銀三枚

先日書いたgin-kei.hatenablog.com
のブクマコメントに「BLACKGAMER (id:blackgamer)」さんから

また新技が…（笑）　頑張れば反復横跳びとかしてくれそうですね。

というコメントを頂いたのでがんばってみました。

CSS3を使って画像に反復横飛びをさせてみる

使用するCSSは

<style type="text/css">
.yokotobi {
    -webkit-animation: yokotobi_animation  2.0s linear infinite;
    -moz-animation:    yokotobi_animation  2.0s linear infinite;
    -ms-animation:     yokotobi_animation  2.0s linear infinite;
    -o-animation:      yokotobi_animation  2.0s linear infinite;
    animation:         yokotobi_animation 2.0s linear infinite;
}

@-webkit-keyframes yokotobi_animation {
     0%    { -webkit-transform: translateX( 60px)  translateY( 60px) ;}
    13%    { -webkit-transform: translateX(120px)  translateY(  0px) ;}
    25%    { -webkit-transform: translateX(180px)  translateY( 60px) ;}
    38%    { -webkit-transform: translateX(240px)  translateY(  0px) ;}
    50%    { -webkit-transform: translateX(300px)  translateY( 60px) ;}
    63%    { -webkit-transform: translateX(240px)  translateY(  0px) ;}
    75%    { -webkit-transform: translateX(180px)  translateY( 60px) ;}
    88%    { -webkit-transform: translateX(120px)  translateY(  0px) ;}
   100%    { -webkit-transform: translateX( 60px)  translateY( 60px) ;}
}

@-moz-keyframes yokotobi_animation {
     0%    { -moz-transform: translateX( 60px)  translateY( 60px) ;}
    13%    { -moz-transform: translateX(120px)  translateY(  0px) ;}
    25%    { -moz-transform: translateX(180px)  translateY( 60px) ;}
    38%    { -moz-transform: translateX(240px)  translateY(  0px) ;}
    50%    { -moz-transform: translateX(300px)  translateY( 60px) ;}
    63%    { -moz-transform: translateX(240px)  translateY(  0px) ;}
    75%    { -moz-transform: translateX(180px)  translateY( 60px) ;}
    88%    { -moz-transform: translateX(120px)  translateY(  0px) ;}
   100%    { -moz-transform: translateX( 60px)  translateY( 60px) ;}
}

@-ms-keyframes yokotobi_animation {
     0%    { -ms-transform: translateX( 60px)  translateY( 60px) ;}
    13%    { -ms-transform: translateX(120px)  translateY(  0px) ;}
    25%    { -ms-transform: translateX(180px)  translateY( 60px) ;}
    38%    { -ms-transform: translateX(240px)  translateY(  0px) ;}
    50%    { -ms-transform: translateX(300px)  translateY( 60px) ;}
    63%    { -ms-transform: translateX(240px)  translateY(  0px) ;}
    75%    { -ms-transform: translateX(180px)  translateY( 60px) ;}
    88%    { -ms-transform: translateX(120px)  translateY(  0px) ;}
   100%    { -ms-transform: translateX( 60px)  translateY( 60px) ;}
}

@-o-keyframes yokotobi_animation {
     0%    { -o-transform: translateX( 60px)  translateY( 60px) ;}
    13%    { -o-transform: translateX(120px)  translateY(  0px) ;}
    25%    { -o-transform: translateX(180px)  translateY( 60px) ;}
    38%    { -o-transform: translateX(240px)  translateY(  0px) ;}
    50%    { -o-transform: translateX(300px)  translateY( 60px) ;}
    63%    { -o-transform: translateX(240px)  translateY(  0px) ;}
    75%    { -o-transform: translateX(180px)  translateY( 60px) ;}
    88%    { -o-transform: translateX(120px)  translateY(  0px) ;}
   100%    { -o-transform: translateX( 60px)  translateY( 60px) ;}
}

@keyframes yokotobi_animation {
     0%    { transform: translateX( 60px)  translateY( 60px) ;}
    13%    { transform: translateX(120px)  translateY(  0px) ;}
    25%    { transform: translateX(180px)  translateY( 60px) ;}
    38%    { transform: translateX(240px)  translateY(  0px) ;}
    50%    { transform: translateX(300px)  translateY( 60px) ;}
    63%    { transform: translateX(240px)  translateY(  0px) ;}
    75%    { transform: translateX(180px)  translateY( 60px) ;}
    88%    { transform: translateX(120px)  translateY(  0px) ;}
   100%    { transform: translateX( 60px)  translateY( 60px) ;}
}

</style>

です。

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

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

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

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

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

うまく反復横飛びしてますでしょうか？

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

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

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

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