【CSSハック】マーカーで引いた装飾をアニメーションで動くようにする

こんにちは、Webサービス開発者のyuku_tasです。

簡単なプロフィール: MoldSpoon Inc.代表。開業から15年、業界に携わって20年。Webサイト/iOS/Androidアプリ開発から、
データ分析業務・コンサル業務、ベンチャーから保険会社まで様々な案件を個人会社の形で請け負ってまいりました。
詳しくはこちら

概要

今日は小ネタです。

たまにデザインが優秀なブログ様（技術が関係ないジャンル含め）を参考にさせていただくことがあります。
（いつもありがとうございます...！）

その中で、気になっていたのは、

のマーカーを引いたような装飾がアニメーションするような装飾です。今回はこれを調査し、独自に実装してみようと思いました。

本記事のゴール

マーカーで引いた装飾を装飾するようにする。

作業

マーカーで引いた装飾のおさらい

すでにこのブログでも実装していたのですが、マーカーで引いたような装飾は背景色をつけるbackgroundのグラデーションを指定する linear-gradientで実現します。

.hoso {
  font-weight: bold;
  background: linear-gradient(transparent 60%, #FBB92F 60%);
}

ちょっとグラデーションを聞かせるときの概念は分かりにくいのですが ウェブ標準のためのドキュメントであるMDN Web Docsのlinear-gradiendのページによると、

• linear-gradientとは直線に沿った色の変化を意味する。
• 1つ目の項目（引数）は始点の色
• 2つ目の項目（引数）は終点の色

を指すようです。よって、これらを調整することで色は変えられます。

例えば、以下のように指定できます。

.hoso2 {
  font-weight: bold;
  background: linear-gradient(#ff0 50%, #00f 50%); // 黄色、青の順番に指定
}

.futo {
  font-weight: bold;
  background:linear-gradient(transparent 20%, #FBB92F 20%);
}

アニメーションを追加

さて、このような整理の中で、上記のhosoというクラスにアニメーションを追加していきます。いったんJavascriptを利用しないで済むように、CSSアニメーションを使用していきたいと思います。

.hoso {
  font-weight: bold;
  background: linear-gradient(transparent 60%, #FBB92F 60%);
  background-size: 200% 200%;
  animation: makerUp 3s ease-in-out infinite; /* アニメーション設定 */
}

@keyframes makerUp {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-size: 100% 100%;
  }
}

試行錯誤した結果、このようになりました。 わかりやすく何度も繰り返すために、無限ループにしていますがもし初回描画時のみにしたいときはinfiniteをforwardsとします。

CSSでは限界がある

上記のような@keyframesを利用したCSSアニメーションは、時間の経過に合わせてCSSの状態を変化させる、という発想で書いています。

しかし、上記では背景画像を元々下のほうの「60%」描画するとしていたものを、0%~100%に変化させる という指定になり、左から右に色をつけるようなグラデーションが描けず中途半端になってしまいました。

まとめ

今回は下からせり上がるタイプのアニメーションを採用しましたが、できれば、マーカーペンを引いたように左から右に色がつく アニメーションを実現したいと思いました。これについてはJavascriptを併用しないとできない可能性もありそうで、調査が行え次第本記事に追記していこうと思っております！

この記事が何かのお役に立てれば幸いです。
最後までお読みいただきありがとうございました！