〽️ タイムラインと配置。 〽️ scale(x,y)。 〽️ うごかしてみる。 〽️ Y軸でもやってみる。
⬆︎SVGついてのまとめページ、CSSアニメーションの基本コーナーはこちら。
こんにちは、「ふ」です。
前回は画像の中心点を基準に拡大/縮小するアニメーションを紹介しました。
扨(さて)今度は、ヘッダ部分に表示されているような「軸」を基準にして大きさの変わるアニメーションを実装してみたいと思います。一緒に作っていきましょう。
ヘッダ部分に表示したアニメーションはx軸を基準として、画像が徐々に拡大していくものです。
まずはこれを目指そうと思います。タイムラインを考えましょう。
前回のタイムラインとほぼ同じ流れです。画像の拡大とともに、不透明度を徐々に100%に近づけていくことにしました。
◼︎ fuuno.svg
前回使ったSVG画像をそのまま使うことにしました。配置の指定もそのまんまです。
コードを貼っておきます。
◼︎ HTML(参照表記)
◼︎ HTML(インライン表記)
◼︎ CSS
◼︎ ブラウザ
ここまでOKですね?
軸を基準に拡大させる表現は、xまたはy成分のうち、一方の大きさを固定することで実現します。
前回はscaleの数値を1つだけ指定しました。
この表記だと、x/y成分が同時に変形します。
やり方を変えましょう。
このように2つの値をカンマで区切って指定してやると、x/y成分をそれぞれ独立した状態で変形させることができます。
ということは、どちらかの成分を常に「1」にしたままもう片方を変化させてやると… うまくいきそうですな!
◼︎ CSS
CSSでSVG画像を参照し、animationプロパティを仕込みます。これも内容は前回と同じです。
◼︎ CSS
ここが今回の肝。transform.scale( )の値をx,yごとに指定しました。xは「1」のまんま固定させ、yの値のみを徐々に拡大していきます。
そしておなじみの、不透明度を徐々に上げていく仕組み。
このようになりました。
web上で、
切実な一言を伝えたいとき、
使えそうです。
うまくいきましたか?
今度は調子に乗ってY軸を基準にしてみます。書き換えるのは@keyframesの値指定を変更するだけです。
◼︎ CSS
Y軸を基準にすると、こんな感じになりました。
ちなみに近々紹介しようと思っている、transform-originというプロパティを使えば、基準となる軸の位置を変化させることもできます。
上の画像はY軸を左側に指定したもの。これでまた表現範囲が広がってきそうですね。
◼︎ CSS
いちおーCSSを書き換えたものも貼っておきます⬆︎(1行加えるだけ‼︎)。 またそのうち、詳しく紹介させていただきますね ♬
関連記事
swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。