animationtransitionがcss3のアニメーション用プロパティで
transformは変形用のプロパティ、2D3Dは別なのか?一緒なのか?
とりあえずこの3つが頭の中でホットケーキになっちゃうくらいこんがらがっちゃってるので練習。
tで始まるのが多すぎるんだ。

animations

animationプロパティの特徴とか感じた事とか

  • ループ出来る。
  • keyframesを使って細かい設定が出来る。
  • hoverで動かすとマウスが外れた時すぐに初期状態に戻るのが格好悪い。
  • なのでループでずっと動かしているか、javascriptと絡めたりした方がいいのかな?と思ったり

animation使用例

webkit系のブラウザのみ動作します。

  • ease
  • linear
  • ease-in
  • ease-out
  • ease-in-out

ほら、マウスが外れた瞬間ガチっと初期位置にもどるのが格好悪いでしょう?

html

css

animation-timing-functionはkeyframesの中でも指定できたり色んなところに記述できる?

ショートハンドを使ってみる

CSS Animations Module Level 3を参照すると以下の記述でショートハンドになるそうな。

[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] [, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] ]*

読み方(w3cが解説に使う記号の意味)がイマイチわかってないけど、.ani1:hover liの指定をショートハンドで書き直すとこんな感じ?
[]内の値が順番関係なしで重複しなければok?
でもそしたらdurationとdelayの区別はどうやってつけてるんだ?先に登場するほうがdurationなのかな。

動作確認

  • ease
  • linear
  • ease-in
  • ease-out
  • ease-in-out

transitions

transitionプロパティの特徴とか感じた事とか

  • ループさせられない。
  • 変更前と変更後の2つをいったり来たりするので手軽に動きのあるロールオーバーメニューが作れる
  • これ好きだな。

transition使用例

  • ease
  • linear
  • ease-in
  • ease-out
  • ease-in-out

html

css

ショートハンド

animationsと同じでtransitionsのページを参考に
CSS Transitions Module Level 3

<p>[<‘transition-property’> || <‘transition-duration’> || <‘transition-timing-function’> || <‘transition-delay’> [, [<‘transition-property’> || <‘transition-duration’> || <‘transition-timing-function’> || <‘transition-delay’>]]*</p>

この例だと特に使う必要がないけどこんな感じ?

durationがないと上手く動かないな。

もしくはこんな感じ?

もう少しシンプルな書き方が出来そうだけどなぁ。

transform

animationのkeyframesやtransitionの中で出てきたtransformは要素を変形させるプロパティでFirefoxも3.1から対応してるんですって(-moz-が必要)
参考 / CSS3大接近:第3回 transformプロパティ|gihyo.jp
skew(ゆがみ)とかscale(拡大)とかrotate(回転)とかあってtransalteは移動。

機能移動
初期値0
ポジティブ,ネガティブどちらも可
・%
・相対値(emなど),絶対値(pxなど)
適用できる要素・ブロックレベル要素
・インラインレベル要素
継承なし(親要素に指定しても子要素に継承されません)
記述例Firefox3.1betaの場合:
・-moz-transoform:translate(xxdeg);
・-moz-transoform:translateX(xxdeg);
・-moz-transoform:translateY(xxdeg);
Webkit系(Safari3.1,Webkit,Google chromeの場合:
・-webkit-transform:translate(xxdeg);
・-webkit-transoform:translateX(xxdeg);
・-webkit-transoform:translateY(xxdeg);

参考

CSS Animations Module Level 3
CSS Transitions Module Level 3

CSS 2D Transforms Module Level 3
CSS 3D Transforms Module Level 3

しかし毎日暑いですねぇ…


One thought on “css3のanimationとtransitionとtransform

コメントを残す

メールアドレスが公開されることはありません。

You can add images to your comment by clicking here.