再生条件
「初回表示」「ループ」「ホバー」「クリック」「スクロール」など、動き始める条件です。
一覧の見方
カードの見方
動いていないように見える場合は、「再生条件」とカード内の案内を確認してください。
何が変わるか
透明度、位置、回転、拡大率など、開始前と完了後の違いをカード内に表示します。
変更する場所
animation-durationは時間、translateは移動量、scaleは大きさを表します。
対応目安
比較的新しいCSSは、公開前に対象ブラウザーで動作確認してください。
確認方法
ホバー系はプレビューへマウスを重ねるほか、Tabキーで見本を選ぶか「状態を再現」を押して確認できます。操作系はクリックまたはキーボードで操作できます。スクロール系は専用枠が自動で上下し、フォーカス中は停止して矢印キー等で動かせます。端末で「動きを減らす」が有効な場合は、ページ上部の案内から図鑑用プレビューを有効にできます。
使い方
3ステップで使えます
詳細画面では、HTMLとCSSを別々またはまとめてコピーできます。変更する値もサンプルごとに表示します。
- 01
動きを探す
名前、用途、CSSプロパティ、カテゴリー、再生条件から絞り込みます。
- 02
HTMLとCSSをコピー
「詳しく見る」を開き、必要なコードだけを制作中のページへ貼り付けます。
- 03
数値と色を調整
animation-duration（再生時間）、移動距離、倍率、色など、変更箇所の説明を見ながら調整します。
CSSの読み方
animationの基本
次の1行では、アニメーション名、時間、速度変化、終了状態を順番に指定しています。
名前
時間
速度変化
終了状態
.fade-up {
animation:
fade-up
.8s
ease-out
both;
}アクセシビリティ 動きを減らす設定に対応する共通CSS
強い動きが苦手な利用者の設定を尊重する場合は、サイト全体のCSS末尾へ追加します。
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
}
}動きを探す
アニメーションを探す
各カードに「何がどう変わるか」を表示します。スクロール連動は専用枠が自動で動き、手動でも確認できます。
360件を表示
すべてのアニメーション
一致するアニメーションがありません
検索語を短くするか、絞り込み条件をリセットしてください。
関連ページ
HTML・CSSの基礎を調べる
HTML要素・属性やCSSプロパティの意味は、同じLab内の完成版辞典で確認できます。記事や制作記録へ戻る場合はブログをご利用ください。
WordPressサイトへ戻る ↗