最近、初めての案件をいただくことになり、
その１回目のデザイン案をいただきました。そのときに、トップページにアニメーション指定があったので、あらかじめ、実装してみたので、CSSアニメーションについてまとめます。
基本：@keyframesでアニメーションの流れを、animationプロパティで動き方を指定する方法
@keyframes
まずは、アニメーションの動きの設定。要素の状態を記述していきます。たとえば、文字サイズをだんだん大きくするものであれば、font-sizeプロパティの値を変化させます。
下の例では、h1要素に対してアニメーションを指定しています。
See the Pen by Son Hiroki Hong-su (@sonho463) on CodePen.
HTML@keyframesでは
・アニメーションの名前を設定
・0%から１００％の間でプロパティの値変化を記述
フォントサイズ36px → 最後に64pxを指定しました。
0%のときの値は省略できます。
ここにいろいろまとめて記述もできます。
例えば、ここで、opacityなども合わせて記述すると、文字が大きくなりながら、透明度も変化させるといったことがかんたんにできます。
animationプロパティ
次に、アニメーションを付与する要素に、animationプロパティを追加していきます。
h1{
animation-name: bigger;
animetion-duration: 3s;
animation-fill-mode: forwards
}animation関連のプロパティは全部で８個ありました。
animation-name / animation-duration / animation-timing-function / animation-delay / animation-iteration-count / animation-direction / animation-fill-mode / animation-play-state
今回はそのうち３つを指定しています。
animation-name
@keyframesで設定した名前。どのアニメーションを付与するか。これだけでは、まだ動きません。
animation-duration
アニメーションの経過時間を設定。sまたはmsで指定します。
animation-fill-mode
アニメーションが終わったときの挙動を設定します。
none（デフォルト） アニメーションが終わったら最初の状態
forwards アニメーションの最後の状態を保持
backwards アニメーションの最初の状態にもどる
both 両方・やってみるとforwardsと同じ挙動でした。
アニメーションが終わって最初の状態か、最後の状態かというところしか必要ないようにしか思えていません。だけど、これからいろいろ複雑なアニメーションになってくると、４つの値を使い分けないと行けないときがくるのだろうと思っています。
やってみて
１．対応していないプロパティ
例えば今回はbackground-clip:text;が当てられた要素にアニメーションを付与して、アニメーションが終わったら、background-clip: unset;にしようとしたかったので、１００％のところにunsetを設定しました。すると、unsetが先に実行されてしまいました。
いろいろ考えて、最終的には、animationではなく、JavaScriptとtransitionを組み合わせて、そこに、さらに、setTimeoutを使ってゴリゴリに思い通りの挙動に持っていきました。
なにかもっとスマートな方法がありそうな気がしています。ご指摘ください。
２．複数のアニメーションのタイミング
複数のアニメーションを同時に付与できるのですが、このタイミングの制御がとてもむずかしいです。animation-delayプロパティを使って、タイミング制御しようとしたのですが、あまりうまく行きませんでした。今後の研究課題です。
まとめ
もっともっと、animationをたくさん使っていきたいなと思います。
アニメーションのもりすぎは良くないですが、自分の事業用サイトなど作るときには、１つのアピールになると思うので、いろいろかっこいいアニメーションを眺めて、自分で再現するなど、今後は練習を重ねていきたいと思います。
参考URL
コメント