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

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

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

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>



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

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

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