CSS transitionに触れる

CSS

CSS transitionに触れてみた

※「触れる」と書いて、「ふれる」「さわれる」と読めるのって紛らわしい・・

 

See the Pen transition by yoko0180 (@yoko0180) on CodePen.

 

アニメーション関連の技術は自分の中で優先度が低いのだが、

機会があったのでやってみた。

 

記述例１
transition: background-color 1s linear 0

 

記述例２
transition: width 1s linear 0 , height 1s linear 0;

 

シンタックス

transition [property] [duration] [timing] [delay]
  property 効果を適用するCSSプロパティ名を指定する
  duration 変化に掛かる時間を指定する
  timing-function 変化のタイミング・進行割合を指定する
    ease 開始と完了を滑らかにする（初期値）
    linear 一定
    ease-in ゆっくり始まる
    ease-out ゆっくり終わる
    ease-in-out ゆっくり始まってゆっくり終わる
  delay 変化がいつ始まるかを指定する

 

考え方

基本スタイルにtransition書いて、変化後のスタイルを用意してそれをクラス適用して変化させる

 

transformプロパティで変化をスタイルできるので変化後のスタイルとして定義する


記述例
transform translateX(300px)


主な関数
scale(X方向の縮尺比率, Y方向の縮尺比率)
rotate(回転角度)
translate(X方向の移動距離, Y方向の移動距離)
translateX(X方向の移動距離)
translateY(Y方向の移動距離)

 

ついでにCodePenの埋め込みもしてみたかったのでそれもやってみた。

CodePenの埋め込みは該当ページで画面右下の「Embed」をクリック。

ポップアップがでるのでデフォルトビューなどを設定して

下部に表示されているコードをコピペする。