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

- お知らせ
- NEW 2023.06.01 【CSS】画像の透過について、mix-blend-modeを使ってみよう
- お知らせ
- 2023.05.18 【WordPress】各ページ背景画像の指定についてbody_classを解説
- お知らせ
- 2023.05.11 【WordPress】CPT UI インポート/エクスポート機能について解説
こんな方に読んでほしい
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.01
2022.06.10
2022.06.03
2021.08.10
2023.06.01
2023.05.18
2023.05.11
2023.05.09
2023.05.04
2023.04.27
2022.06.30
2020.03.22
2020.03.06
2020.02.22
© 2020 shu-naka-blog