動くCSSのためのメモ。

CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす 「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。 例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ

[iqm]

CSSで愛生会が作れそう

[app2641]

重くてしぬー

[orinpick]

このCSSサイトはすごすぎる

[megazalrock]

まずはその2MBあるpngをどうにかした方がいい。

[SATOSHI_A]

ファンが回りはじめました。

[n314]

分かりやすい

[yamaneko623]

この記事すごい……。CSSでサイトここまで動かせるんだって分かって、ワクワクが止まらない。

[liszworks]

サンプルから解説からボリュームまで素晴らしすぎる。大容量でロードが遅いけどその間出てくるウサギのアニメーションが可愛くて全然気にならない(笑)

[hinahiropapa]

hoverアニメ

[cbc10c6y]

とっても便利だよね！

[yantzn]

transition

[karin98]

CSSアニメーション効果のサンプル集

[yayocan]

勉強

[jed_lee]

自然なエフェクトをかなり詳しくまとめているので非常に参考になる。エフェクトが "さりげなく心地良い" コツを掴んでおくのにも重要。

[hanabi_hibana]

css3でアニメーションエフェクトいろいろまとめ

[h-a-t-e-h-a-t-e-h-a-t-e-n-a]

css3

[cumacuma]

css3で夢が広がりんぐ。

[nink]

アニメーションがいいかんじ！

[tsu70na3551]

“.tabBtn li a { display: block; cursor: pointer; padding: 10px 0; color: #fff; text-decoration: none; transition: background-color .3s;} .tabBtn li a:hover { background-color: rgba(205,92,92,.5);} /* :::::: mechanism :::::: */ .tabContents section { opacity: 0.1; text-align: center; transition: op

[pichan0709]

css

[ricopinx]

参考にさせて頂きます。

[minakaworks]

サンプルが超絶わかりやすい

[Azicore]

CSSによるアニメーションについての分かりやすいまとめ。サンプルもきれい。

[kat_cloudair]

動くcss

[ZombieStomp]

“transition”

[alice_r]

[CSS Animation]

[zma]

なんかすごい

[jdash]

とても丁寧な解説。PCで触っていて楽しくなる。はてブコメントの「CSSで愛生会が作れそう」は笑ったｗ

[kosanao]

css　アニメーション

[Hi32]

ホバーアニメーションが主だが、その他いろいろ。サンプルのみならず、解説も丁寧にしてくれている。

[sentas]

CSSすんげえ…。

[sigwyg]

動くCSS

[urakey]

動くCSSのためのメモ。 そんな訳で、要素を手前に配置して、パララックスしてみます！下図のような感じに、各要素を手前へ移動させることにしました。 Tags: *ブログ記事, css3 from Pocket June 06, 2014 at 12:17PM

[glat_design]

transition、animation、transformを使った表現、タブやパララックス、スライドショーも /

[ytkwsm]

説明量すごい！