UNORTHODOX WORKBOOK

2017.04.04 Tue

CSSアニメーション(transition)で起こるバブリングの原因と対策

正確には「バブリング」とは呼ばないと思うし、ちょっと意味合いが違うかもしれないけど、CSSで子要素に与えたtransitionが親要素へ伝播し、アニメーションの挙動をおかしくさせる現象に何度か遭遇した。 もしかすると、C…

2015.12.29 Tue

【CSS】animationプロパティを使ったマウスホバーエフェクトの巻き戻し

CSSでマウスホバーエフェクトといえばtransitionプロパティを使ってアニメーションさせることが多いと思いますが、少し複雑なアニメーションをさせたい時はtransitionでは難しいことがあると思います。 そんな時…

2015.06.05 Fri

全画面の背景画像をCSSのマウスホバーで切り替える(画像のプレロードあり)

全画面に設置した背景画像をマウスホバーで切り替える方法。全画面の背景画像を含め、全てCSSだけでやっています。 切り替えるだけであれば、間接セレクタを使ってマウスホバー時の背景画像を用意しておけばいいだけなので、結構簡単…

2015.05.24 Sun

CSSでテキストをなぞるようにアニメーションしながら色を変える

なぞるようにといっても、書き順通りに文字を書いていくようなものではなくて、左から右へ徐々にスライドさせて色を変えるエフェクト。 なんと言ったらいいのかよく分からないのですが、所謂、プログレスバーのように進行しながら、徐々…

2015.03.16 Mon

CSSフィルターを使って流体を表現する(＋SVGフィルター)

滑らかに結合したような表現をCSSで実装する方法です。なんて言ったらいいか分からなくて、タイトルでは「流体」と表現していますが、要は「ぷよぷよ」みたいなやつですね。英語ではこういうのを「gooey」とか言ったりするみたい…

2015.02.28 Sat

マウスホバーでアニメーションしながら追従するバーをCSSだけで実装する

よくメニューとかグローバルナビで使われているやつで、マウスホバーすると、それにあわせて付いてくる線(バー)をCSSだけで実装する方法。 JavaScriptでやることが多いと思いますけど、CSSだけでできるんじゃないかと…

2015.02.22 Sun

CSSでボーダーをボックスに沿って走らせる

昨日に引き続き、CSSの小ネタを紹介します。「CSSでボーダーをボックスに沿って走らせる」とか、よく分からないタイトルですが、簡単にいうとボーダーをボックスに沿って移動させる方法で、四角いボックスの外周を回り続けるエフェ…

2015.02.21 Sat

CSSのみでストライプの背景をマウスホバーで動かす

CSSの小ネタ。マウスホバー時の挙動として、ちょっと面白かったのでCSSだけで作ってみました。 ストライプの背景をマウスホバーで動かし、ぐるぐると回っているような感じに見せるエフェクトです。画像を一切使わず、背景のストラ…