複数のプロパティを持つ CSS トランジション
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つのプロパティすべてを使用できます。
Zeeshan is a detail oriented software engineer that helps companies and individuals make their lives and easier with software solutions.
LinkedIn