(cache) 「秋の日はつるべ落とし」をCSS3で再現する - 攻めは飛車角銀桂守りは金銀三枚

気が付けば９月も終わり１０月を迎えます。歳をとるごとに時間の進みがとても速く感じられます。
おそらく明日には１００歳くらいになっているんじゃないでしょうか。

「秋の日はつるべ落とし」をCSS3で表現してみる

そんな秋を迎えると必ず妻が言いだす言葉があります。

子供たちに注意を促す意味で「昔から『秋の日はつるべ落とし』と言って急に暗くなるから早く帰ってきいや」と。

「秋の日はつるべ落とし」。

日が落ちる速度は地球の自転の速度なんで変わらないでしょうが、確かに日が暮れるの早くなってきました。

９月だけでも３０分以上日の入りが早く

以下は2016年の日の入り時刻ですが1ヶ月で30分以上早くなってますね。

日付け	日の入り（東京）
2016/09/01	18:08
2016/09/02	18:07
2016/09/03	18:06
2016/09/04	18:04
2016/09/05	18:03
2016/09/06	18:01
2016/09/07	18:00
2016/09/08	17:59
2016/09/09	17:57
2016/09/10	17:56
2016/09/11	17:54
2016/09/12	17:53
2016/09/13	17:51
2016/09/14	17:50
2016/09/15	17:48
2016/09/16	17:47
2016/09/17	17:45
2016/09/18	17:44
2016/09/19	17:42
2016/09/20	17:41
2016/09/21	17:40
2016/09/22	17:38
2016/09/23	17:37
2016/09/24	17:35
2016/09/25	17:34
2016/09/26	17:32
2016/09/27	17:31
2016/09/28	17:29
2016/09/29	17:28
2016/09/30	17:26

そんな「秋の日はつるべ落とし」をCSS3で再現

そこで暇なんでIT技術者として長年生きて来たすべてをつぎ込んで、今日は「秋の日はつるべ落とし」をCSS3で再現してみましょう。

で、CSS3のソースです。

.otoshi {
    -webkit-animation: yokotobi_animation  0.8s linear infinite;
    -moz-animation:    yokotobi_animation  0.8s linear infinite;
    -ms-animation:     yokotobi_animation  0.8s linear infinite;
    -o-animation:      yokotobi_animation  0.8s linear infinite;
    animation:         yokotobi_animation  0.8s linear infinite;
}
@-webkit-keyframes yokotobi_animation {
     0%    { -webkit-transform:  translateX( 60px ) translateY( 0px ) ; }
    50%    { -webkit-transform:  translateX( 60px ) translateY( 100px ) ; }
   100%    { -webkit-transform:  translateX( 60px ) translateY( 200px ) ; }
}

@-moz-keyframes yokotobi_animation {
     0%    { -moz-transform:  translateX( 60px ) translateY( 0px ) ; }
    50%    { -moz-transform:  translateX( 60px ) translateY( 100px ) ; }
   100%    { -moz-transform:  translateX( 60px ) translateY( 200px ) ; }
}

@-ms-keyframes yokotobi_animation {
     0%    { -ms-transform:  translateX( 60px ) translateY( 0px ) ; }
    50%    { -ms-transform:  translateX( 60px ) translateY( 100px ) ; }
   100%    { -ms-transform:  translateX( 60px ) translateY( 200px ) ; }
}

@-o-keyframes yokotobi_animation {
     0%    { -o-transform:  translateX( 60px ) translateY( 0px ) ; }
    50%    { -o-transform:  translateX( 60px ) translateY( 100px ) ; }
   100%    { -o-transform:  translateX( 60px ) translateY( 200px ) ; }
}

@keyframes yokotobi_animation {
     0%    { transform:  translateX( 60px ) translateY( 0px ) ; }
    50%    { transform:  translateX( 60px ) translateY( 100px ) ; }
   100%    { transform:  translateX( 60px ) translateY( 200px ) ; }
}