テキストアニメーション
エンジニアのためのWebチートシート
CSSで実現できるテキストアニメーションのチートシートです。フェードイン、スライド、タイプライター、グリッチ、ネオン効果など、様々なテキストエフェクトをライブプレビューで確認できます。
基本入場アニメーション
Fade In
テキストが透明から不透明にフェードイン
Fade In Up
下から上に移動しながらフェードイン
Fade In Down
上から下に移動しながらフェードイン
Slide In Left
左からスライドして表示
Slide In Right
右からスライドして表示
Scale In
小さい状態から拡大して表示
Bounce In
バウンドしながら表示
文字単位アニメーション
Typewriter
タイプライターのように1文字ずつ表示
Letter Spacing
文字間隔が広がるアニメーション
Wave
各文字が波のように上下に動く
Letter Rotate
文字が回転しながら表示
強調アニメーション
Pulse
拡大縮小を繰り返す脈動効果
Shake
左右に揺れる効果
Wobble
ぐらぐら揺れる効果
Rubber Band
ゴムのように伸び縮み
Heartbeat
心臓の鼓動のような効果
高度な視覚効果
Glitch
デジタルグリッチ効果
Neon Glow
ネオンライトのような発光効果
Gradient Shift
グラデーションが流れる効果
Shadow Pulse
影が脈動する効果
Blur In
ぼかしからシャープに
3D効果
3D Rotate X
X軸を中心に回転
3D Rotate Y
Y軸を中心に回転
3D Flip
3Dでフリップする効果
Perspective Tilt
遠近感のある傾き
ホバーエフェクト
Underline Slide
下線がスライドして表示
Background Fill
背景色が塗りつぶされる
Clip Reveal
テキストがマスクで現れる
Color Shift
色が変化する効果
引用・参考リンク
WebTerm
WebTermは、AI時代のためのブラウザベースのターミナルサンドボックスです。
AIコーディングツールの普及に伴い、CLIの基礎知識はエンジニアだけでなく非エンジニアにとっても重要になっています。
WebTermは、ローカル環境を壊す心配なく、Linuxコマンド、Gitワークフロー、CLI AIツールを安全に学べる「一時的・無料・ノーサインアップ」の環境を提供します。
WebTerm
Browser Terminal Sandbox for Learning CLI
Related Cheatsheets
- CSS Flexbox-FlexboxとはFlexible Box Layout Moduleのことで、柔軟なレイアウトを簡単に実現することができるCSS3の新しいレイアウトモジュールです。 要素の横並びにfloatやinline-blockを使用するのは時代遅れです。 Flexboxのプロパティをチートシートにまとめてみました。
- Sass-SassとはSyntactically Awesome Stylesheetsのことで、CSSをより構造的に記述することのできるCSSのメタ言語です。SASS記法とSCSS記法の二種類が存在します。 変数、四則演算、if文やwhile文が使えるため、リーダブルでメンテナブルに記述することができ、開発効率が向上します。 そんな便利なSass(SCSS記法)をチートシートにまとめました。
- CSS セレクタ-【図解付き】知っておくと便利なCSSのセレクタの種類と使用例を図解付きでチートシートにまとめました。 隣接セレクタやbefore/afterといった疑似要素、何番目の要素かを指定するnth-childやhoverなどのよく使用する疑似クラスを表現する方法をまとめてみました。
- CSS cursorプロパティ-【図解付き】cursor: pointer以外にも、moveやgrabなどの知っておくと便利なcursorプロパティをチートシートにまとめてみました。
- 画像エフェクト-CSSで実現できる画像エフェクトのチートシートです。filter、clip-path、blend-modeなどを使った視覚効果と、AI画像生成用のプロンプト例をまとめました。
- タイポグラフィ-CSSタイポグラフィのチートシートです。折り返し制御、文字詰め、カーニング、流体タイポグラフィなど、テキスト表示を美しく制御するためのプロパティをまとめました。
All Cheatsheets
Comments