Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Web/CSS/CSS_view_transitions を新規翻訳 #23504

Merged
merged 1 commit into from
Sep 14, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 80 additions & 0 deletions files/ja/web/css/css_view_transitions/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
---
title: CSS ビュー遷移
slug: Web/CSS/CSS_view_transitions
l10n:
sourceCommit: ef793e5764cf3b6371f275233a8e278e692d2ff8
---

{{CSSRef}}

**CSS ビュー遷移**モジュールは、[ビュー遷移 API](/ja/docs/Web/API/View_Transitions_API) の動作を定義します。これにより、開発者は文書内の異なる状態間や文書間でアニメーションする遷移を作成することができます。このモジュールは、これらの遷移をスタイル設定するための CSS プロパティと擬似要素も定義します。

## リファレンス

### プロパティ

- {{cssxref("view-transition-name")}} {{experimental_inline}}

> [!NOTE]
> このモジュールでは、`view-transition-class` プロパティも定義していますが、いまのところ、どのブラウザーも対応していません。

### アットルールと記述子

- {{cssxref("@view-transition")}}
- [`navigation`](/ja/docs/Web/CSS/@view-transition#navigation) 記述子

### セレクターと擬似要素

- {{cssxref("::view-transition")}} {{experimental_inline}}
- {{cssxref("::view-transition-image-pair()")}} {{experimental_inline}}
- {{cssxref("::view-transition-group()")}} {{experimental_inline}}
- {{cssxref("::view-transition-new()")}} {{experimental_inline}}
- {{cssxref("::view-transition-old()")}} {{experimental_inline}}

> [!NOTE]
> このモジュールでは、`:active-view-transition` および `:active-view-transition-type()` 擬似クラスも定義していますが、いまのところ、どのブラウザーも対応していません。

### インターフェイス

- {{domxref("CSSViewTransitionRule")}}
- {{domxref("ViewTransition")}}
- {{domxref("ViewTransition.skipTransition()")}} メソッド
- {{domxref("ViewTransition.updateCallbackDone")}}
- {{domxref("ViewTransition.ready")}}
- {{domxref("ViewTransition.finished")}}
- {{domxref("Document.startViewTransition()")}} メソッド

## ガイド

- [ビュー遷移 API の使用](/ja/docs/Web/API/View_Transitions_API/Using)

- : ビュー遷移を作成する方法と、ビュー遷移のアニメーションをカスタマイズする方法について説明します。アクティブなビュー遷移の操作方法についても記載しています。

## 関連概念

- {{domxref("PageRevealEvent", "pagereveal")}} イベント
- {{domxref("PageSwapEvent", "pageswap")}} イベント
- {{domxref("Document.visibilityState")}}

- [CSS アニメーション](/ja/docs/Web/CSS/CSS_animations)モジュール

- {{cssxref("animation")}}
- {{cssxref("@keyframes")}}
- {{domxref("CSSKeyframesRule")}}
- {{domxref("CSSStyleRule")}}
- [ウェブアニメーション API](/ja/docs/Web/API/Web_Animations_API)

- [CSS 座標変換](/ja/docs/Web/CSS/CSS_transforms)モジュール

- {{cssxref("transform")}}
- {{cssxref("transform-function")}}

## 仕様書

{{Specifications}}

## 関連情報

- [擬似要素](/ja/docs/Web/CSS/Pseudo-elements)
- [関数擬似クラス](/ja/docs/Web/CSS/Pseudo-classes#関数擬似クラス)
- [CSS の構成要素: 擬似クラスと擬似要素](/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements)