CSS - transition

Font Awesomeのアイコンをアニメーションするグラデーションカラーで表示する

Result See the Pen Font Awesome Animated Gradient by kachibito (@kachibito) on CodePen. Font Awesomeのアイコンをア...

CSSのみでアコーディオン・2パターン

Result See the Pen Pure CSS Accordion by kachibito (@kachibito) on CodePen. 今更感半端ないですが、CSSのみでアコーディオン 全部開けら...

「リンクにマウスホバーでアニメーションしながら下線表示」で行をまたげるようにする

Result リンクにマウスを乗せるとアニメーションエフェクト付きで下線表示する、みたいなやつですが、検索して出てくる疑似要素を使う手だと行をまたいだ時にうまく表示できないみたいです サンプル上が従来の疑似要素を使った方法で...
Ads

マウスホバーで画像にスプリットエフェクト

Result See the Pen Split Image on hover by kachibito (@kachibito) on CodePen. 昔Flash等で少し流行した、画像が分割されるアニメーションエフェクトです ...

SVGでアニメーションしながら形状が遷移する検索フォーム

Result See the Pen Search input animation by kachibito (@kachibito) on CodePen. よくあるサーチアイコンからinput要素の下線に遷移する、みたいなの ...

クリックで展開するSNSシェアボタン

Result See the Pen Share button by kachibito (@kachibito) on CodePen. シェアボタンのアイコンもCSS製なのでコードは少し冗長化してます css htm...

アニメーションエフェクト付きのtoggleボタン

Result See the Pen Pure CSS Toggle Buttons | ON-OFF Switches by kachibito (@kachibito) on CodePen. CSSのみで実装したアニメーション...

CSSで画像にマウスホバーで折りたたまれた紙が展開されるようなエフェクト

Result See the Pen Spread fx by kachibito (@kachibito) on CodePen. 折りたたまれた紙をパタパタと広げるようなエフェクト 少し長いコードになりますが、再利用できるので...

クリックで展開する円状のメニュー

Result See the Pen 🌟 Circle Menu #PureCss 🌟 by kachibito (@kachibito) on CodePen. SNSのPathっぽい円状のメニューです。 クリックでメニューが展...

CSSだけでLightbox風に画像ポップアップ

Result See the Pen CSS Lightbox by kachibito (@kachibito) on CodePen. アニメーションエフェクトの不要なら結構シンプルなコードになります css h...

CSSだけでOne page scrollなWebサイト

Result See the Pen One page scroll by kachibito (@kachibito) on CodePen. 昔iPhone 5Sのプロダクト紹介ページにあったレイアウトを真似たスクリプト(On...

画像にマウスホバーでグラデーションのオーバーレイエフェクト

Result See the Pen CSS Gradient Hover Effect by kachibito (@kachibito) on CodePen. たまに見かけるホバーエフェクト。グラデーションのオーバーレイがマウ...

CSS変数でイージングアニメーションを管理

Result See the Pen LQgZBv by kachibito (@kachibito) on CodePen. カスタムプロパティで:rootに作ったイージングをvar()関数で呼び出せるようにします css ...

ボタンにSVGを使って水がせりあがる様なホバーエフェクト

Result See the Pen Mana Button by kachibito (@kachibito) on CodePen. SVGを使うといろいろ作れて楽しいですね。 HTMLで書いた自作のSVGをurl()フィルタ...

CSSのみでモダンなアニメーションエフェクトで表示されるモーダルウィンドウ

Result See the Pen Pure Css Popup by kachibito (@kachibito) on CodePen. 回転しながらふわっと浮かび上がる、ちょっとモダンなエフェクトのモーダルウィンドウ :t...

サーチアイコンをクリックすると検索窓がスライド表示する

Result See the Pen Animated search Form by kachibito (@kachibito) on CodePen. アイコンをクリックで検索窓が飛び出す、みたいなの css html ...

box-shadowを利用したボタンのホバーエフェクト集

Result See the Pen Hover buttons using box-shadow inset by kachibito (@kachibito) on CodePen. box-shadowを応用したボタンのホバー...

フォーカスするとlabelが上部に移動しながらテキストが縮小する

Result See the Pen Floating Label Pattern by kachibito (@kachibito) on CodePen. プレースホルダーに見せかけたlabelを、フォーカス時に縮小しながら上部...

ボタンの角に印をつけ、マウスホバーで伸びてくるエフェクト

Result See the Pen CSS button hover effect by kachibito (@kachibito) on CodePen. 角についた印がマウスホバーで伸びてくる、というアニメーションエフェクト...

CSSだけでマウスホバーした方向に応じてエフェクトを変える

Result See the Pen Direction aware hover pure CSS by kachibito (@kachibito) on CodePen. CSSだけでどうやってるんだろう、と思ってコード見たらい...

マウスホバーするとグラデーションの背景と、遅延してテキストが浮かび上がる

Result See the Pen Simple Tile Hover Effect by kachibito (@kachibito) on CodePen. よく見るやつです。テキストは遅延表示されます css ...

マウスホバーで下線が伸びてくるシンプルなアニメーションエフェクト

Result See the Pen underline effect by kachibito (@kachibito) on CodePen. よく見かけますね。疑似要素を使います css html via...
Ads