マイクロインタラクションのためのCSSアニメーション #JavaScript

UXの一部としてマイクロインタラクションが重要視されています。また、jsよりもcssアニメーションの方がレンダリングコストが低いと聞いたことがあります。マイクロインタラクションにおけるcssアニメーションの使い分けに関して投稿いたします。

CSSによるアニメーション

transformはあくまで原形から変形させるものであり、アニメーションではないです。

 監視するcssプロパティを指定し、そのプロパティが変更されればアニメーションを実行する。

css

transition: background-color .2s ease-in
/*background-colorの監視*/

 プロパティの変更は、:hoverなど事前に定義したものだけでなく、javascriptによる変更にも適用されます。

var myElement = document.querySelector("#myElement");
myElement.style.backgroundColor = "333";

※ transition: all ~~~; とすると全てのプロパティを監視できるので便利ですが、描画が重くなる原因になるので避けましょう。

事前に @keyframes 名前 {変化} と定義しておき、animationプロパティから呼び出し、中間点やループなど様々なアニメーションに関する指定をすることができます。

css

@keyframes move {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(10px, 10px);
  }
}

css

.yeah {
   animation: move 1s forwards;
 }
 /*moveアニメーションを1秒で行い、再生後、最後のキーフレームの状態を保持する*/

※念のためにtransitionとanimationについて説明しましたが、リンク先の方が詳細に書かれています。

この記事の本題です。マイクロインタラクションにおいて、どちらのプロパティを優先的に使用するかですが、transitionを優先的に使用することが適切かと思います。

マイクロインタラクションは、ユーザーイベントによって発火させるためです。（特にクリック）

animation(keyframes)は関数型言語のように、同じ動作を事前に定義し、コントロールすることができますが、引数を渡せるわけではありません。ユーザーがクリックした座標を使用するなどはできません。

css

@keyframes move {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(10px, 10px);
  }
}

これは必ず10pxずつ移動してしまう。ユーザーがクリックした座標に向けての動作をアニメーションにすることができません。

マイクロインタラクションのイベントはクリックが多いと思います。
ですが、現状のcssには、click擬似クラスがないです。

postcssのプラグインの中にclick擬似クラスを追加するというものがありましたが、解決策にはならなさそうです。
jsファイルを生成し、jQueryにてtoggleしているだけでした。