ash CSS Animation

HTMLとCSSだけで作成したアニメーションを随時公開します。「実用的なもの」から「使いどころはよくわからないけど見ていて楽しいもの」まで、幅広く作成したいと思います。何かの参考にしていただけると嬉しいです。コードは自由にコピペして使ってください。

ついでにTwitterアカウントをフォローしてくれたら幸せです。

世界的に有名なおっさんがジャンプします。HTMLがかなり長くなってしまいました。擬似要素を使えばもっとコンパクトに記述できそうですが、アニメーションの実装が複雑になるのでやめました。

- Code -

HTML

<input type="radio" name="aaa" id="radio1">
<input type="radio" name="aaa" id="radio2">

<div class="anime-007">
  <ul class="jump">
    <li class="jumpRow">
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-v"></div>
      <div class="dot jumpDot-v"></div>
      <div class="dot jumpDot-v"></div>
    </li>
    <li class="jumpRow">
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-v"></div>
      <div class="dot jumpDot-v"></div>
      <div class="dot jumpDot-v"></div>
    </li>
    <li class="jumpRow">
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-v"></div>
      <div class="dot jumpDot-v"></div>
    </li>
    <li class="jumpRow">
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-b"></div>
      <div class="dot jumpDot-b"></div>
      <div class="dot jumpDot-b"></div>
      <div class="dot jumpDot-v"></div>
      <div class="dot jumpDot-v"></div>
      <div class="dot jumpDot-b"></div>
      <div class="dot jumpDot-v"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-a"></div>
      <div class="dot jumpDot-a"></div>
      <div class="dot jumpDot-a"></div>
    </li>
    <li class="jumpRow">
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-b"></div>
      <div class="dot jumpDot-v"></div>
      <div class="dot jumpDot-b"></div>
      <div class="dot jumpDot-v"></div>
      <div class="dot jumpDot-v"></div>
      <div class="dot jumpDot-v"></div>
      <div class="dot jumpDot-b"></div>
      <div class="dot jumpDot-v"></div>
      <div class="dot jumpDot-v"></div>
      <div class="dot jumpDot-v"></div>
      <div class="dot jumpDot-a"></div>
      <div class="dot jumpDot-a"></div>
    </li>
    <li class="jumpRow">
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-b"></div>
      <div class="dot jumpDot-v"></div>
      <div class="dot jumpDot-b"></div>
      <div class="dot jumpDot-b"></div>
      <div class="dot jumpDot-v"></div>
      <div class="dot jumpDot-v"></div>
      <div class="dot jumpDot-v"></div>
      <div class="dot jumpDot-b"></div>
      <div class="dot jumpDot-v"></div>
      <div class="dot jumpDot-v"></div>
      <div class="dot jumpDot-v"></div>
      <div class="dot jumpDot-a"></div>
    </li>
    <li class="jumpRow">
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-b"></div>
      <div class="dot jumpDot-b"></div>
      <div class="dot jumpDot-v"></div>
      <div class="dot jumpDot-v"></div>
      <div class="dot jumpDot-v"></div>
      <div class="dot jumpDot-v"></div>
      <div class="dot jumpDot-b"></div>
      <div class="dot jumpDot-b"></div>
      <div class="dot jumpDot-b"></div>
      <div class="dot jumpDot-b"></div>
      <div class="dot jumpDot-b"></div>
      <div class="dot jumpDot-w"></div>
    </li>
    <li class="jumpRow">
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-v"></div>
      <div class="dot jumpDot-v"></div>
      <div class="dot jumpDot-v"></div>
      <div class="dot jumpDot-v"></div>
      <div class="dot jumpDot-v"></div>
      <div class="dot jumpDot-v"></div>
      <div class="dot jumpDot-v"></div>
      <div class="dot jumpDot-a"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
    </li>
    <li class="jumpRow">
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-a"></div>
      <div class="dot jumpDot-a"></div>
      <div class="dot jumpDot-a"></div>
      <div class="dot jumpDot-a"></div>
      <div class="dot jumpDot-a"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-a"></div>
      <div class="dot jumpDot-a"></div>
      <div class="dot jumpDot-a"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-a"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
    </li>
    <li class="jumpRow">
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-a"></div>
      <div class="dot jumpDot-a"></div>
      <div class="dot jumpDot-a"></div>
      <div class="dot jumpDot-a"></div>
      <div class="dot jumpDot-a"></div>
      <div class="dot jumpDot-a"></div>
      <div class="dot jumpDot-a"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-a"></div>
      <div class="dot jumpDot-a"></div>
      <div class="dot jumpDot-a"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-b"></div>
    </li>
    <li class="jumpRow">
      <div class="dot jumpDot-v"></div>
      <div class="dot jumpDot-v"></div>
      <div class="dot jumpDot-a"></div>
      <div class="dot jumpDot-a"></div>
      <div class="dot jumpDot-a"></div>
      <div class="dot jumpDot-a"></div>
      <div class="dot jumpDot-a"></div>
      <div class="dot jumpDot-a"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-b"></div>
    </li>
    <li class="jumpRow">
      <div class="dot jumpDot-v"></div>
      <div class="dot jumpDot-v"></div>
      <div class="dot jumpDot-v"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-a"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-v"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-v"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-b"></div>
      <div class="dot jumpDot-b"></div>
    </li>
    <li class="jumpRow">
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-v"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-b"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-b"></div>
      <div class="dot jumpDot-b"></div>
    </li>
    <li class="jumpRow">
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-b"></div>
      <div class="dot jumpDot-b"></div>
      <div class="dot jumpDot-b"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-b"></div>
      <div class="dot jumpDot-b"></div>
    </li>
    <li class="jumpRow">
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-b"></div>
      <div class="dot jumpDot-b"></div>
      <div class="dot jumpDot-b"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
    </li>
    <li class="jumpRow">
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-b"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-r"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
      <div class="dot jumpDot-w"></div>
    </li>
  </ul>
  <ul class="mario">
    <li class="row row1">
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
    </li>
    <li class="row row2">
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_rw"></div>
      <div class="dot color_rw"></div>
      <div class="dot color_rw"></div>
      <div class="dot color_rw"></div>
      <div class="dot color_rw"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
    </li>
    <li class="row row3">
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_rw"></div>
      <div class="dot color_rr"></div>
      <div class="dot color_rr"></div>
      <div class="dot color_rr"></div>
      <div class="dot color_rr"></div>
      <div class="dot color_rr"></div>
      <div class="dot color_rw"></div>
      <div class="dot color_rw"></div>
      <div class="dot color_rw"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
    </li>
    <li class="row row4">
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_cr"></div>
      <div class="dot color_cr"></div>
      <div class="dot color_cr"></div>
      <div class="dot color_vr"></div>
      <div class="dot color_vr"></div>
      <div class="dot color_cr"></div>
      <div class="dot color_vr"></div>
      <div class="dot color_wr"></div>
      <div class="dot color_wr"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
    </li>
    <li class="row row5">
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_bw"></div>
      <div class="dot color_vb"></div>
      <div class="dot color_bb"></div>
      <div class="dot color_vb"></div>
      <div class="dot color_vv"></div>
      <div class="dot color_vv"></div>
      <div class="dot color_bb"></div>
      <div class="dot color_vv"></div>
      <div class="dot color_vw"></div>
      <div class="dot color_vw"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
    </li>
    <li class="row row6">
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_bb"></div>
      <div class="dot color_vv"></div>
      <div class="dot color_bb"></div>
      <div class="dot color_bv"></div>
      <div class="dot color_vv"></div>
      <div class="dot color_vv"></div>
      <div class="dot color_vb"></div>
      <div class="dot color_bv"></div>
      <div class="dot color_vv"></div>
      <div class="dot color_vv"></div>
      <div class="dot color_vw"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
    </li>
    <li class="row row7">
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_bb"></div>
      <div class="dot color_bv"></div>
      <div class="dot color_vb"></div>
      <div class="dot color_vb"></div>
      <div class="dot color_vv"></div>
      <div class="dot color_vv"></div>
      <div class="dot color_bv"></div>
      <div class="dot color_bb"></div>
      <div class="dot color_bv"></div>
      <div class="dot color_bv"></div>
      <div class="dot color_wv"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
    </li>
    <li class="row row8">
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_wb"></div>
      <div class="dot color_wb"></div>
      <div class="dot color_vv"></div>
      <div class="dot color_vv"></div>
      <div class="dot color_vv"></div>
      <div class="dot color_vv"></div>
      <div class="dot color_vb"></div>
      <div class="dot color_vb"></div>
      <div class="dot color_vb"></div>
      <div class="dot color_wb"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
    </li>
    <li class="row row9">
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_aw"></div>
      <div class="dot color_aw"></div>
      <div class="dot color_aw"></div>
      <div class="dot color_av"></div>
      <div class="dot color_rv"></div>
      <div class="dot color_rv"></div>
      <div class="dot color_av"></div>
      <div class="dot color_av"></div>
      <div class="dot color_wv"></div>
      <div class="dot color_wv"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
    </li>
    <li class="row row10">
      <div class="dot color_vw"></div>
      <div class="dot color_vw"></div>
      <div class="dot color_aw"></div>
      <div class="dot color_aw"></div>
      <div class="dot color_aa"></div>
      <div class="dot color_aa"></div>
      <div class="dot color_ra"></div>
      <div class="dot color_ra"></div>
      <div class="dot color_rr"></div>
      <div class="dot color_aa"></div>
      <div class="dot color_aw"></div>
      <div class="dot color_av"></div>
      <div class="dot color_vw"></div>
      <div class="dot color_vw"></div>
      <div class="dot color_vw"></div>
      <div class="dot color_ww"></div>
    </li>
    <li class="row row11">
      <div class="dot color_vw"></div>
      <div class="dot color_vw"></div>
      <div class="dot color_vw"></div>
      <div class="dot color_wv"></div>
      <div class="dot color_aa"></div>
      <div class="dot color_aa"></div>
      <div class="dot color_ra"></div>
      <div class="dot color_va"></div>
      <div class="dot color_ra"></div>
      <div class="dot color_ra"></div>
      <div class="dot color_rv"></div>
      <div class="dot color_av"></div>
      <div class="dot color_av"></div>
      <div class="dot color_vw"></div>
      <div class="dot color_vw"></div>
      <div class="dot color_ww"></div>
    </li>
    <li class="row row12">
      <div class="dot color_vw"></div>
      <div class="dot color_vw"></div>
      <div class="dot color_wv"></div>
      <div class="dot color_wv"></div>
      <div class="dot color_rr"></div>
      <div class="dot color_ra"></div>
      <div class="dot color_ra"></div>
      <div class="dot color_ra"></div>
      <div class="dot color_ra"></div>
      <div class="dot color_ra"></div>
      <div class="dot color_rv"></div>
      <div class="dot color_wv"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_bw"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
    </li>
    <li class="row row13">
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_wb"></div>
      <div class="dot color_rb"></div>
      <div class="dot color_rr"></div>
      <div class="dot color_rr"></div>
      <div class="dot color_rr"></div>
      <div class="dot color_rr"></div>
      <div class="dot color_rr"></div>
      <div class="dot color_rr"></div>
      <div class="dot color_rr"></div>
      <div class="dot color_rw"></div>
      <div class="dot color_bw"></div>
      <div class="dot color_bw"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
    </li>
    <li class="row row14">
      <div class="dot color_ww"></div>
      <div class="dot color_bb"></div>
      <div class="dot color_bb"></div>
      <div class="dot color_rr"></div>
      <div class="dot color_rr"></div>
      <div class="dot color_rr"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_wr"></div>
      <div class="dot color_wr"></div>
      <div class="dot color_rr"></div>
      <div class="dot color_rw"></div>
      <div class="dot color_rw"></div>
      <div class="dot color_bw"></div>
      <div class="dot color_bw"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
    </li>
    <li class="row row15">
      <div class="dot color_ww"></div>
      <div class="dot color_bb"></div>
      <div class="dot color_bw"></div>
      <div class="dot color_bw"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_wb"></div>
      <div class="dot color_wb"></div>
      <div class="dot color_wb"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
    </li>
    <li class="row row16">
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_bw"></div>
      <div class="dot color_bw"></div>
      <div class="dot color_bw"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_wb"></div>
      <div class="dot color_wb"></div>
      <div class="dot color_wb"></div>
      <div class="dot color_wb"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
      <div class="dot color_ww"></div>
    </li>
  </ul>
</div>
<div class="btnBox">
  <label class="jumpBtn -jump1" for="radio1">Jump!</label>
  <label class="jumpBtn -jump2" for="radio2">Jump!</label>
</div>

CSS

.anime-007{
  position : relative ;
  width : 150px ;
  height : 150px ;
}
.mario, .jump{
  display : flex ;
  flex-direction : column ;
  justify-content : center ;
  align-items : center ;
  position : relative ;
  width : 100% ;
  height : 100% ;
  list-style : none ;
  margin : 0 ;
  padding : 0 ;
}
.jump{
  position : absolute ;
  z-index : 2 ;
  top : 0 ;
  left :0 ;
  opacity : 0 ;
}
.row, .jumpRow{
  display : flex ;
  margin :0  ;
  padding : 0 ;
}
.dot{
  position : relative ;
  margin : 0 0 ;
  padding : 0 ;
  width : 8px ;
  height  :8px ;
  box-sizing : border-box ;
}
.mario .dot{
  animation-duration : .25s ;
  animation-timing-function : steps(2, end) ;
  animation-iteration-count : infinite ;
}
.btnBox{
  position : relative ;
  z-index : 0 ;
  width : 200px ;
  height : 40px ;
  margin : 40px auto 0 ;
  line-height : 40px ;
  text-align : center ;
  color : #FFF ;
  background : #098705;
}
.jumpBtn{
  position : absolute ;
  top : 0 ;
  left : 0 ;
  display : block ;
  width : 100% ;
  height: 100% ;
}
.-jump1{
  z-index : 1;
}
.-jump2{
  z-index : -1;
}
#radio1, #radio2{
  display : none ;
}
#radio1:checked ~ .anime-007 .jump{
  animation : jump 2s linear ;
}
#radio2:checked ~ .anime-007 .jump{
  animation : jump2 2s linear ;
}
#radio2:checked ~ .anime-007 .mario{
  animation : del 2s linear ;
}
#radio1:checked ~ .anime-007 .mario{
  animation : del2 2s linear ;
}
#radio1:checked ~ .btnBox .-jump1,
#radio2:checked ~ .btnBox .-jump2{
  z-index : -1;
}
#radio2:checked ~ .btnBox .-jump1,
#radio1:checked ~ .btnBox .-jump2{
  z-index : 1;
}
@keyframes del{
  0%{
    opacity : 1 ;
  }
  0.1%{
    opacity : 0 ;
  }
  99.9%{
    opacity : 0;
  }
  100%{
    opacity : 1 ;
  }
}
@keyframes del2{
  0%{
    opacity : 1 ;
  }
  0.1%{
    opacity : 0 ;
  }
  99.9%{
    opacity : 0;
  }
  100%{
    opacity : 1 ;
  }
}
@keyframes jump{
  0%{
    opacity : 0 ;
    transform : translate(0,0);
  }
  0.1%{
    opacity : 1;
    transform : translate(0,0);
  }
  40%{
    transform : translate(0,-80px);
  }
  50%{
    transform : translate(0,-100px);
  }
  60%{
    transform : translate(0,-80px);
  }
  99.9%{
    opacity : 1;
    transform : translate(0,0);
  }
  100%{
    opacity : 0 ;
    transform : translate(0,0);
  }
}
@keyframes jump2{
  0%{
    opacity : 0 ;
    transform : translate(0,0);
  }
  0.1%{
    opacity : 1;
    transform : translate(0,0);
  }
  40%{
    transform : translate(0,-80px);
  }
  50%{
    transform : translate(0,-100px);
  }
  60%{
    transform : translate(0,-80px);
  }
  99.9%{
    opacity : 1;
    transform : translate(0,0);
  }
  100%{
    opacity : 0 ;
    transform : translate(0,0);
  }
}
.color_ww{background : transparent ;}
.color_rr{background : #FF0000 ;}
.color_aa{background : #0000FF ;}
.color_bb{background : #3F2B15 ;}
.color_vv{background : #FFDAAB ;}
.jumpDot-w{background : transparent;}
.jumpDot-r{background : #FF0000;}
.jumpDot-a{background : #0000FF;}
.jumpDot-b{background : #3F2B15;}
.jumpDot-v{background : #FFDAAB;}
.color_rw{animation-name : col-rw ;}
.color_cr{animation-name : col-cr ;}
.color_vr{animation-name : col-vr ;}
.color_wr{animation-name : col-wr ;}
.color_vb{animation-name : col-vb ;}
.color_bv{animation-name : col-bv ;}
.color_vw{animation-name : col-vw ;}
.color_wv{animation-name : col-wv ;}
.color_wb{animation-name : col-wb ;}
.color_wv{animation-name : col-wv ;}
.color_bw{animation-name : col-bw ;}
.color_av{animation-name : col-av ;}
.color_rv{animation-name : col-rv ;}
.color_ra{animation-name : col-ra ;}
.color_aw{animation-name : col-aw ;}
.color_va{animation-name : col-va ;}
.color_rb{animation-name : col-rb ;}
@keyframes col-rw{
  0%{background : #FF0000 ;}
  50%{background : #FF0000 ;}
  51%{background : transparent;}
  100%{background : transparent;}
}
@keyframes col-rv{
  0%{background : #FF0000 ;}
  50%{background : #FF0000 ;}
  51%{background : #FFDAAB;}
  100%{background : #FFDAAB;}
}
@keyframes col-rb{
  0%{background : #FF0000 ;}
  50%{background : #FF0000 ;}
  51%{background : #3F2B15;}
  100%{background : #3F2B15;}
}
@keyframes col-cr{
  0%{background : #3F2B15 ;}
  50%{background : #3F2B15 ;}
  51%{background : #FF0000;}
  100%{background : #FF0000;}
}
@keyframes col-vr{
  0%{background : #FFDAAB ;}
  50%{background : #FFDAAB ;}
  51%{background : #FF0000;}
  100%{background : #FF0000;}
}
@keyframes col-wr{
  0%{background : transparent ;}
  50%{background : transparent ;}
  51%{background : #FF0000;}
  100%{background : #FF0000;}
}
@keyframes col-wb{
  0%{background : transparent ;}
  50%{background : transparent ;}
  51%{background : #3F2B15;}
  100%{background : #3F2B15;}
}
@keyframes col-vb{
  0%{background : #FFDAAB ;}
  50%{background : #FFDAAB ;}
  51%{background : #3F2B15;}
  100%{background : #3F2B15;}
}
@keyframes col-bv{
  0%{background : #3F2B15 ;}
  50%{background : #3F2B15 ;}
  51%{background : #FFDAAB;}
  100%{background : #FFDAAB;}
}
@keyframes col-bw{
  0%{background : #3F2B15 ;}
  50%{background : #3F2B15 ;}
  51%{background : transparent;}
  100%{background : transparent;}
}
@keyframes col-vw{
  0%{background : #FFDAAB ;}
  50%{background : #FFDAAB ;}
  51%{background : transparent;}
  100%{background : transparent;}
}
@keyframes col-wv{
  0%{background : transparent ;}
  50%{background : transparent ;}
  51%{background : #FFDAAB;}
  100%{background : #FFDAAB;}
}
@keyframes col-av{
  0%{background : #0000FF ;}
  50%{background : #0000FF ;}
  51%{background : #FFDAAB;}
  100%{background : #FFDAAB;}
}
@keyframes col-ra{
  0%{background : #FF0000 ;}
  50%{background : #FF0000 ;}
  51%{background : #0000FF;}
  100%{background : #0000FF;}
}
@keyframes col-va{
  0%{background : #FFDAAB ;}
  50%{background : #FFDAAB ;}
  51%{background : #0000FF;}
  100%{background : #0000FF;}
}
@keyframes col-aw{
  0%{background : #0000FF ;}
  50%{background : #0000FF ;}
  51%{background : transparent;}
  100%{background : transparent;}
}

CSS Animation
- #007 -

- Preview -

- Code -

HTML

CSS

CSS Animation- #007 -

- Preview -

- Code -

HTML

CSS

CSS Animation
- #007 -