CSS3のtransitionショートハンド（短縮）プロパティの使い方
CSSのtransitionショートハンド（短縮）プロパティを使うと、transition-property（遷移対象のプロパティ）、transition-duration（遷移にかかる時間）、transition-timing-function（変化の速度カーブ）、transition-delay（遅延時間）という4つの個別プロパティを、たった1行にまとめて指定することができます。
値は「プロパティ名 → 時間 → タイミング関数 → 遅延」の順にスペース区切りで記述します。複数のプロパティを同時にアニメーションさせたい場合は、それぞれの指定をカンマ（,）で区切って並べます。
記述例
以下は、transitionショートハンドプロパティを使用したCSSのコード例です。マウスホバーすると、要素の背景色と角丸（border-radius）が同時に変化するように設定しています。
<!DOCTYPE html>
<html>
<head>
<style>
.container div {
width: 300px;
height: 100px;
border-radius: 1px;
background-color: rgb(25, 0, 255);
border: 2px solid red;
transition: border-radius 2s ease 1s, background-color 2s ease-out 1s;
}
.container:hover div {
background-color: purple;
border-radius: 50%;
}
</style>
</head>
<body>
<h1>Transitionショートハンドプロパティ</h1>
<div class="container">
<div></div>
</div>
<h2>上のdivにマウスを乗せると、色が変わり形が楕円になります</h2>
</body>
</html>実行結果
上記のコードを実行すると、次のような出力が得られます。
コードのポイント
- border-radius 2s ease 1s：角丸の変化を2秒かけて「ease」の速度カーブでアニメーションし、開始まで1秒待機します。
- background-color 2s ease-out 1s：背景色の変化を2秒かけて「ease-out」（終わり際に減速）のカーブでアニメーションし、こちらも1秒の遅延を設けています。
- 複数の遷移をカンマで区切ることで、1つの宣言内で異なるプロパティに個別のアニメーション設定を適用できます。
-
CSS3でトランジションエフェクトを作成する方法をわかりやすく解説
CSS3でトランジション（遷移）エフェクトを作成するには、transitionプロパティを使用します。このプロパティを使うことで、要素のスタイルが変化する際に、滑らかで自然なアニメーション効果を実現できます。 transitionプロパティには、主に以下の値を指定します。 transition-property：アニメーションさせたいCSSプロパティ（例：width、height、colorなど） transition-duration：アニメーションの完了までにかかる時間（例：2s = 2秒） transition-timing-function：変化の速度カーブ（ease、linearな
-
CSS3フレキシブルボックスレイアウト（Flexbox）の基本と使い方
CSS3には「フレキシブルボックス（Flexible Box）」と呼ばれるレイアウトモードが用意されており、一般的にFlexbox（フレックスボックス）として知られています。Flexboxを活用すれば、複雑なWebアプリケーションやWebページのレイアウトも、従来のfloatやpositionを使った手法に比べて、はるかに簡単かつ柔軟に構築できます。Flexboxは「コンテナ（親要素）」と「フレックスアイテム（子要素）」で構成されます。コンテナに指定できる主なプロパティは以下のとおりです。flex-direction：アイテムが並ぶ方向（主軸の向き）を指定しますflex-wrap：アイテムの折