HOWTO · CSS
複数のプロパティを持つ CSS トランジション
CSS には 4つのトランジション プロパティがあります。 CSS トランジション プロパティを個別に使用することも、4つのプロパティの省略形をすべて 1つのステートメントで使用することもできます。
このページの内容
Web ページのスタイルを設定するために使用される言語は CSS と呼ばれ、Cascading Style Sheetsの略です。 CSS は、HTML コンポーネントが画面、紙、またはその他のメディアにどのように表示されるかを説明します。
多くの作業は CSS によって保存されます。 複数の Web ページのデザインを同時に管理できます。
CSS ファイルには、外部スタイルシートが保持されます。
CSS の transition プロパティ
CSS トランジションは、コンポーネントをアニメーション化する最も迅速な (そして最もクリーンな) 方法です。 このチュートリアルで CSS トランジションがどのように機能するか、およびそれらを使用してアニメーションを作成する方法を学びます。
時間の経過とともに CSS プロパティがある値から別の値に切り替わると、遷移が発生します。 4つの CSS プロパティ: transition-property、transition-duration、transition-timing-function、および transition-delay を組み合わせて transition プロパティを形成します。
コード例:
.selector {
transition-property: property;
transition-duration: duration;
transition-timing-function: timing-function;
transition-delay: delay}
次のコード例に示すように、上記の 4つのプロパティをすべて 1つのステートメントで使用することもできます。
.selector {
transition: property duration timing-function delay;
}
CSS でトランジションをトリガーする方法
CSS トランジションは、hover (マウスが要素の上にあるときにアクティブになる)、focus (ユーザーが入力要素をクリックするか、タブで要素に移動するとアクティブになる)、または active (ユーザーが要素をクリックするとアクティブになります)。
hover で transition をトリガーする
以下の例に示すように、transition プロパティは hover によってトリガーできます。
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
min-height: 50vh;
justify-content: center;
align-items: center;
}
.button {
font-size: 3em;
font-family: inherit;
border: none;
background-color: #33ae74;
padding: 0.5em 0.75em;
transition: background-color 0.5s ease-out;
}
.button:hover {
background-color: lightgreen;
}
</style>
</head>
<body>
<button class="button">Trigger Transition with hover</button>
</body>
</html>
出力：
クリックで transition をトリガー
以下の例に示すように、クリックで トランジション を有効にすることができます。 1 回クリックするだけで、transition カラーが有効になります。
コード例:
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
min-height: 50vh;
justify-content: center;
align-items: center;
}
.button {
font-size: 3em;
font-family: inherit;
border: none;
background-color: #33ae74;
padding: 0.5em 0.75em;
transition: background-color 0.5s ease-out;
}
.button.is-active {
background-color: lightblue;
}
</style>
</head>
<body>
<button class="button">Trigger Transition with click</button>
</body>
</html>
const button = document.querySelector('.button');
button.addEventListener('click', _ => button.classList.toggle('is-active'));
出力：
まとめ
CSS の transition プロパティは全部で 4つあります。 CSS の transition プロパティを個別に使用し、上記の記事で説明した 1つのステートメントで 4つのプロパティすべてを使用できます。
