[B! css3] yuyanegishiのブックマーク

[JS][CSS3] jQuery を使わずに fadeIn / fadeOut のアニメーションを実装する方法

Modified 2014-09-20 更新情報 setTimeout を使ってフェードイン・アウトするコードを旧IEでも動くコードへ書き直しました。 jQuery を使わずに、CSS3・requestAnimationFrame メソッド・setTimeout 関数で fadeIn / fadeOut のアニメーション表現を行うということをやってみました。jQuery を使えば fadeIn()、fadeOut() だけの記述で済むことですが、いざそれを使わずにとなると大変だなという印象です…。各サンプルは、マウスオーバー時にフェードアウト・マウスアウト時にフェードインします。 HTML は共通で以下のようになっています。 <div id="box">FadeIn/Out</div> CSS3 でフェードイン・アウトする opacity の変化を transition プロパティでアニ

yuyanegishi 2015/04/07

リンク

CSS3を使ってできる画像まわりのエフェクトやスタイリング18

CSS3を使った画像のエフェクトやスタイリングについて、思いつく限り一挙にまとめてみました。たくさん画像を扱うサイトなどを作る際に、CSSでできる表現のカタログとして使ってもらえたらと思います。 ※ 2/24 「2. めくれた風」を書き忘れていたので追記しました目次 1. シャドウ 2. めくれた風 3. トイカメラ風トンネル効果 4. カラー調整 5. 回転 6. 角丸 7. 楕円のフレーム 8. 円のフレーム 9. 三角形フレーム 10. 重なった風 11. ぼかし 12. フェード（シャドウ編） 13. フェード（グラデーション編） 14. 反射 15. リボン 16. 差し込んだ風 17. フレームだけを傾ける 18. 半透明フレームまとめ ※ 実際の表示はこちらから確認できます。 ※ この記事で掲載しているCSSは、シンプルにするためにベンダープリフィックスを付けていません