- HOME
- > BLOG CATEGORY
- 【CSS】transition-delayの使い方、効果の開始時間を適用させる

- お知らせ
- NEW 2023.11.23 【Photoshop】水彩風のテクスチャー作成ついて解説
- お知らせ
- 2023.11.16 【Photoshop】写真の一部を消す加工ついて解説
- お知らせ
- 2023.11.09 【Photoshop】鉛筆風フォントの作成について解説
こんな方に読んでほしい
transition
プロパティについて学びたい方へ今回は、transitionに関する記事パート4になります。
transitionトランジション効果とは、「時間的変化」の意味を持ちます。
transitionプロパティは、原則として「変化前のスタイル」に適用させます。
例として、「a」、「a:hover」があるとしたら、変化前である「a」の方に適用させます。
[記事の内容]
transition-delay
プロパティとは、トランジション効果が開始されるまでの時間を指定します。
書き方は以下のようになります
/*--例:transition-delay--*/
要素 {
transition-delay: 値;
}
transition-delayプロパティとは、トランジション効果が開始されるまでの時間を適用させます。
2sと指定した場合は2秒後に効果が開始されます。
「デフォルトボタン」では、マウスオーバーした際に、瞬時に背景色が変更されます。
「1秒後変化ボタン」では、transition-delay: 1s
を指定することで1秒後に効果が開始されます。
「組み合わせボタン」では、前回解説したduration
プロパティと組み合わせることで、
マウスオーバーした際に「0.5秒後に1秒かけて完了」します。
<a class="btn01">デフォルトボタン</a>
<a class="btn02">1秒後変化ボタン</a>
<a href="btn03">組み合わせボタン</a>
/*--1秒後変化ボタン--*/
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-delay: 1s; /*--1秒後に効果が開始されます--*/
}
/*--組み合わせボタン--*/
a.btn03 {
/*--以下省略--*/
transition-property: background-color,color;
transition-duration: 1s;
transition-delay: 0.5s; /*--0.5秒後に効果が開始されます--*/
}
a.btn02:hover,
a.btn03:hover{
color: #fff;
text-decoration :none;
background-color: #fd5e5a;
}
【STEP01 CSS】transition-propertyの使い方、トランジション効果を適用させる
transition-propertyプロパティとは、トランジション効果を適用させます。
【STEP02 CSS】transition-timing-functionの使い方、効果の変化を適用させる
timing-functionプロパティとは、トランジション効果の変化(速度)のタイミングを適用させます。
【STEP03 CSS】transition-durationの使い方、効果が完了するまでの時間
transition-durationプロパティとは、トランジション効果が完了するまでの時間を指定します。
【STEP05 CSS】トランジション効果(一括指定)について
transitionプロパティの一括指定について
今回はこれで以上です。
次回は「トランジションの一括指定」について解説します。
transition-delay
とは、トランジション効果が開始されるまでの時間を指定します。2023.06.22
2023.06.01
2022.06.10
2022.06.03
![]() |
【Amazon.co.jp 限定】1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート) 新品価格 |
2023.11.23
2023.11.16
2023.11.09
2023.10.26
2023.10.12
2023.09.28
2023.06.15
2022.06.30
2020.03.22
2020.03.06
© 2023 shu-naka-blog