Help us understand the problem. What is going on with this article?

トランジションアニメーションを@keyframesで作る方法

どういうことか

CSSで複雑な遷移アニメーションを作りたいと思ったことはありませんか?私はよくあります。
ですが、transitionによる指定ではfromtoの2状態間の遷移しか定義できません。例えば、次のアニメーションキーフレームをtransitionで定義することはできないのです。

@keyframes {
  0% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
}

そこで、CSSアニメーションの仕様を使ってJavaScriptを使わずに上のような遷移アニメーションを実装してみようと思います。

結論から言うと、animation-fill-modeというCSSプロパティを指定すれば実現できます。このプロパティは、アニメーションの再生の前後の要素の状態(スタイル)を指定するものです。
下にそれぞれの値でどのようにアニメーションが変化するのか置いておきます。

See the Pen animation-fill-modeのデモ by Frodo la Intermeza Programisto (@boufrawfrodo2) on CodePen.

backwardsbothだけちょっとわかりにくいですが、backwardsは最初animation-delayプロパティでアニメーションの実行が遅延されている間fromまたは0%(animation-directionnomalalternateの場合、reversealternate-reverseならto100%)のスタイルを維持します。bothは文字通りforwards + backwardsですね。

実際にやってみる

さて、このanimation-fill-modeですが、デフォルト値がnoneのため、アニメーション再生終了後keyframeのスタイルは破棄されます。そこでこれの値をforwardsしておけば、アニメーション終了後、つまり遷移完了後もkeyframeのスタイルが維持され続けるというわけ。

See the Pen @keyframesを使った遷移アニメ by Frodo la Intermeza Programisto (@boufrawfrodo2) on CodePen.

すみません、アドベントカレンダー記事なのに非常に内容が薄い記事でした。

もう少しだけ続くんじゃ

そもそもなんでこんなこと調べたかというと、javascriptを使ったアニメーションが好きではないからでした。ぶっちゃけてしまえば、このテクニックでjavascriptアニメーションの9割は消えると思っています。CSSでは実現できない残りの1割って何でしょう?

どれだけ考えてもCSSだけで実現する方法が思いつかなかったアニメーションとは、最近のUIデザインでもよくつかわれる、クリックした座標に効果をつけるアニメーションです。こちらの場合、アニメーションの部分はCSSで実装できます。が、クリックした座標に要素を作成したり動かしたりするのは今のところCSSでは無理です。attr()CSS関数がcontent以外の要素でもサポートされるようになれば希望はありますが、今は無理。CSSだけでアニメーションを完結させるのはまだ難しそうです。

ぶっちゃけパスデータ弄って形変えたりするのは、ほとんどshape-outsideプロパティで代用できます。面倒くさいけど。ただまぁ、CSS Shapes Module Level 1は2019年12月現在でCandidate Recommendationなので、まだ使っていいか微妙なところですが……。とはいえ、IEとEdge以外の主要ブラウザはかなり前からサポートしてますし、普通にプロダクトに使うのに十分そうではあります。いうものの、サポートしているブラウザも完全にサポートしているわけではなく、例えばpath()CSS関数はほとんどすべてのブラウザでサポートされていません。

See the Pen shape-outsideでそれっぽくアニメーション by Frodo la Intermeza Programisto (@boufrawfrodo2) on CodePen.

現状ではこれが限界ですし、こんなことするくらいなら圧倒的にjavascript使ったほうが簡単です……。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした