2024

葉っぱが下から上へ向かって色が塗られるアニメーションを作った

こんにちは。CSS のお時間がやってきました。

アニメーション

アニメーションによってユーザへリアクションを示せ、動きのあるアプリケーションとして魅せることができます。

完成物

デモ

実際にアニメーションのデモンストレーションページを用意しました。

↑よりぜひアクセスしてください。

ソースコード

にてアニメーションの全容を掲載しています。ご自由にお使いください。使う際にDelete HereとHeadのメタさえ消せば直ぐに利用可能です。

何を作るか

タイトルの通り、「葉っぱが下から上へ向かって色が塗られるアニメーション」です。

予め薄い塗りをした同じシェイプを配置します。

次にキャンバスサイズの四角を作ります。その四角で緑色のグラデーション済みの葉をマスキングします。

葉っぱの定義とマスク

<style>
.svg_leaf_over {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 3rem;
}

.svg_x5F_leaf_path {
  fill: url(#svg_x5F_leaf_g);
  mask: url(#mask1);
}

#svg_x5F_leaf_g stop:first-child {
  stop-color: #00c74c;
}

#svg_x5F_leaf_g stop:last-child {
  stop-color: #00eba4;
}
</style>
<svg id="svg_x5F_leaf" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    viewBox="0 0 747.35 877.82">
  <defs>
    <!-- Linear Gradient -->
    <linearGradient id="svg_x5F_leaf_g" x1="373.68" y1="797.98" x2="373.68" y2="42.05"
      gradientUnits="userSpaceOnUse">
      <stop offset="0" />
      <stop offset="1" />
    </linearGradient>

    <!-- Mask -->
    <mask id="mask1">
      <rect x="0" y="877.82" width="747.35" height="877.82" />
    </mask>
  </defs>

  <path class="svg_leaf_mask"
        d="" />
  <path class="svg_x5F_leaf_path"
        d="" />
</svg>

あとはアニメーションを付加することで完了です。アニメーションはcubic-bezier(0.7, 0, 0.84, 0)のほうがlinerよりも効果的と考えました。一瞬膨らんだりするアニメーションも付けています。

葉っぱのスタイルとアニメーション

svg#svg_x5F_leaf {
  position: relative;
  width: min(40%, 15rem);

  animation: leaf_completed .4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 1.2s;
}

.svg_leaf_mask {
  fill: #ececec;
  animation: leaf_back_spawning .15s linear forwards;
}

#mask1 rect {
  fill: white;
  animation: maskAnimation 1.2s cubic-bezier(0.7, 0, 0.84, 0) forwards;
}

@keyframes leaf_completed {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.2);
  }
}

@keyframes leaf_back_spawning {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes maskAnimation {
  from {
    y: 877.82px;
  }

  to {
    y: 0;
  }
}

@keyframes spinningBox {
  0% {
    opacity: 0;
    transform: scale(0) rotate(0deg);
  }

  10% {
    opacity: 1;
    transform: scale(1.1) rotate(36deg);
  }

  20% {
    transform: scale(1.1) rotate(72deg);
  }

  85% {
    transform: scale(1) rotate(306deg);
  }

  100% {
    transform: scale(0) rotate(360deg);
  }
}

さらに、「COMPLETE」のような文字をJavaScriptでタイミングを制御することでアニメーションとして最後に表示できます。

完了メッセージのスタイル

.leaf_complete_message {
  font-size: 1.35rem;
  letter-spacing: .15rem;
  font-weight: bold;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  animation: leaf_completed_mes_open .3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: 1.45s;
  color: #00c74c;
}

@keyframes leaf_completed_mes_open {
  from {
    transform: scaleY(0);
  }

  to {
    transform: scaleY(1);
  }
}

テキストのHTML要素

<div class="leaf_complete_message">COMPLETED</div>

JavaScriptでleaf_complete_messageのクラスさえ追加すれば簡単に実現可能ですね。

完成

アニメーションがあるとないとでかなり印象が変わりますよね。

自動更新

コメントはまだありません

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.