- HOME
- > BLOG CATEGORY
- 【CSS】transition-durationの使い方、効果が完了するまでの時間

- お知らせ
- NEW 2025.01.25 【WordPress】MW WP Form セレクトボックスを必須にする方法
- お知らせ
- NEW 2025.01.25 【WordPress】カスタム投稿カテゴリー取得について
- お知らせ
- 2025.01.18 【jQuery】セレクトボックスにアンカーを設定する方法
こんな方に読んでほしい
transition
プロパティについて学びたい方へ今回は、transitionに関する記事パート3になります。
transitionトランジション効果とは、「時間的変化」の意味を持ちます。
transitionプロパティは、原則として「変化前のスタイル」に適用させます。
例として、「a」、「a:hover」があるとしたら、変化前である「a」の方に適用させます。
[記事の内容]
transition-duration
プロパティとは、トランジション効果が完了するまでの時間を指定します。
書き方は以下のようになります
/*--例:transition-delay--*/
要素 {
transition-duration: 値;
}
transition-durationプロパティとは、トランジション効果が完了するまでの時間を指定します。
3sと指定した場合は3秒かけて効果があらわれます。
「デフォルトボタン」では、マウスオーバーした際に、瞬時に背景色が変更されます。
「効果が完了ボタン」では、transition-duration: 2s
を指定することで2秒かけて効果が完了します。
<a class="btn01">デフォルトボタン</a>
<a class="btn02">効果が完了ボタン</a>
/*--効果が完了ボタン--*/
a.btn02 {
padding: 20px 100px;
display: inline-block;
color: #333;
text-decoration :none;
text-align: center;
background-color: #ffbf4b;
transition-property: background-color,color;
transition-duration: 2s; /*--2秒かけて効果が完了します--*/
}
a.btn02:hover{
color: #fff;
text-decoration :none;
background-color: #fd5e5a;
}
【STEP01 CSS】transition-propertyの使い方、トランジション効果を適用させる
transition-propertyプロパティとは、トランジション効果を適用させます。
【STEP02 CSS】transition-timing-functionの使い方、効果の変化を適用させる
timing-functionプロパティとは、トランジション効果の変化(速度)のタイミングを適用させます。
【STEP04 CSS】transition-delayの使い方、効果の開始時間を適用させる
transition-delayプロパティとは、トランジション効果が開始されるまでの時間を指定します。
【STEP05 CSS】トランジション効果(一括指定)について
transitionプロパティの一括指定について
今回はこれで以上です。
次回は「トランジションの効果が開始されるまでの時間」について解説します。
transition-duration
とは、トランジション効果が完了するまでの時間を指定します。2025.01.11
2024.10.05
2024.05.15
2024.05.09
2025.01.25
2025.01.18
2025.01.18
2025.01.13
2025.01.11
2025.01.11
2023.06.15
2022.06.30
2020.03.22
2020.03.06
© 2024 shu-naka-blog