CSSアニメーション例
マキ割ダイナミック

4 8 6 5

※ネコブレイバーはマッハドッターbraveさんの作品です。

CSSアニメーション例

アニメーション概要

マキ割ダイナミックはロマサガ3に登場する斧技です。文字どおり、マキを割るかのように敵を両断します。与ダメも最高クラスです。

ドット絵の部分は単純に左右に分けて、それぞれ反対のタイミングで上下に移動させています。

与ダメの部分は、ドット絵の下にdivタグを追加して、position: relative;に設定し、CSSアニメーションでtopとleftの値をいじっています（下記HTML参照）。

また、与ダメは途中から表示されるようにopacityで制御しています。

ドット絵部分のHTMLコーディングの概要はこちらから。

HTML

<div style="background-color: width 100%; text-align: center; 
font-size: 60px; font-weight: bold; position: relative; top: -140px;">
  <span style="position: relative;" id="n1">4</span>
  <span style="position: relative;" id="n2">8</span>
  <span style="position: relative;" id="n3">6</span>
  <span style="position: relative;" id="n4">5</span>
</div>

CSS

.dots {
  float: left;
  width: 5%;
  padding-top: 5%;
  position: relative;
}


@keyframes split-left {
  0% {
    top: 0px;
  }
  20% {
    top: -160px;
  }
  40% {
    top: 0px;
  }
}

.c1, .c2, .c3, .c4, .c5, .c6, .c7, .c8, .c9, .c10 {
  animation-name: split-left;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}


@keyframes split-right {
  0% {
    top: 0px;
  }
  20% {
    top: 160px;
  }
  40% {
    top: 0px;
  }
}

.c11, .c12, .c13, .c14, .c15, .c16, .c17, .c18, .c19, .c20 {
  animation-name: split-right;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}


@keyframes damage-1 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
    top: 0px;
    left: 35px;
  }
  66% {
    opacity: 1;
    top: 90px;
    left: 0px;
  }
  100% {
    opacity: 1;
    top: 90px;
    left: 0px;
  }
}

#n1 {
  animation-name: damage-1;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}


@keyframes damage-2 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
    top: 0px;
    left: 30px;
  }
  62% {
    opacity: 1;
    top: 90px;
    left: 0px;
  }
  100% {
    opacity: 1;
    top: 90px;
    left: 0px;
  }
}

#n2 {
  animation-name: damage-2;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}


@keyframes damage-3 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
    top: 0px;
    left: 25px;
  }
  58% {
    opacity: 1;
    top: 90px;
    left: 0px;
  }
  100% {
    opacity: 1;
    top: 90px;
    left: 0px;
  }
}

#n3 {
  animation-name: damage-3;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}


@keyframes damage-4 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
    top: 0px;
    left: 20px;
  }
  54% {
    opacity: 1;
    top: 90px;
    left: 0px;
  }
  100% {
    opacity: 1;
    top: 90px;
    left: 0px;
  }
}

#n4 {
  animation-name: damage-4;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}


#n1, #n2, #n3, #n4 {
  color: white;
  text-shadow:
    2px 0 0 black,
    0 2px 0 black,
    -2px 0 0 black,
    0 -2px 0 black;
}