動く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]

勉強

[hanabi_hibana]

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

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

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]

説明量すごい！

[hedeyoshi]

丁寧に解説しているページ。好き。

[www_taca]

CSSで動くやついろいろ