原森情報技術研究所 WEBコンテンツ企画・制作・運営・サポート / 兵庫県 神戸市 明石市 /

transition-delay

transition (トランジション) / transition-delayいろいろ実験

transition設定のサンプル

例1

白枠マウスホバーで1sごとのdelayで8つの変化

説明

例2

0s
0.1s
0.2s
0.3s
0.4s
0.5s
0.6s
0.7s
0.8s
0.9s
1.0s
↑表示の秒数はdelayする秒数
↓比較用:表示の秒数は変化する秒数
2.0s
0s
0.1s
0.2s
0.3s
0.4s
0.5s
0.6s
0.7s
0.8s
0.9s
1.0s

白枠にマウスホバーで長さが1sで変化

説明

例3

2/-1
2/0
1/0
2/-2

変化秒/delay秒 マイナスdelayの比較。

説明

サンプルの例1の内容

【例1】 Aボックスにマウスホバーで、1sごとに、以下のように変化します。
width : 60px → 120px
height : 60px → 80px
font-size : 50px → 150px
background-color : #00F → #F00
color : #F00 → #00F
left : 10px → 5px
top : 10px → 0px
transform : なし → rotateZ(360deg)

実験して気付いた点は、マウスアウトするとマウスホバーした時の順で元に戻る点です。
(逆になる印象でしたが、各効果にdelay指定があるので元に戻る時もdelayして戻ってます)

指定例:(ベンダープレフィックスは省略しています)
transition:width 1s linear 0s,
height 1s linear 1s,
font-size 1s linear 2s,
background-color 1s linear 3s,
color 1s linear 4s,
left 1s linear 5s,
top 1s linear 6s,
transform 1s linear 7s;

例1へ

サンプルの例2の内容

【例2】 親divにマウスホバーで青いdiv(width:30px)がそれぞれ transition:all 1s linear delay(0s~1.0s) で width:300px に変化するサンプルです。

見た目的には、transition-duration ページのサンプルに似てますが、並べてみると全体の終了までの秒数がちがっています。

delayは全体の秒数から待つ時間、という意味ではなく、開始まで待つ時間ということが確認できるかと思います。
なので、duration が 1s で delay が 1s の場合は、全体としてマウスホバーして、変化が終了するまでに、1s + 1s = 2s の時間が経過することが確認できました。(比較用の赤いバーが2sで変化するのと終了が同じです)

例2へ

サンプル例3の内容

delay がマイナスの場合、過去にさかのぼって開始されていた変化のと中から、というのを確認してみました。
[1] transition-duration : 2s / transition-delay : -1s
[2] transition-duration : 2s …比較用
[3] transition-duration : 1s …比較用
[4] transition-duration : 2s / transition-delay : -2s

2s / -1s と比較用の2s変化、1s変化、ついでに2s / -2s を並べ、白枠ホバーで指定秒で同じ長さに変化します。
結果、[1] は、いきなり 1s 経過時点から開始し、1s で変化しました。
ということで、2s でdelay -1s の場合、全体の秒数は 2s + (-1s) = 1s になり、動作終了は [3] と同時になりました。(※変化の仕方は異なります)
※ 2s -2s の場合はいきなり最終状態になります。

例3へ

transitionのプロパティ

transition-property CLICK
transition-duration CLICK
transition-timing-function CLICK
transition-delay CLICK
変化開始の待ち時間を指定。1s 等。
初期値=0(すぐに始まる)。負の値の場合、過去にさかのぼって開始されていた変化のと中からはじまる。

ページトップへ

top > css3研究 > 
-delay

Text

color

font font-size font-size-adjust font-stretch font-weight

letter-spacing

line-height

max-lines

text-decoration-color text-emphasis-color text-indent text-shadow text-size-adjust

vertical-align

word-spacing

Box

background background-color background-image background-position background-size

border border-color border-top-color border-radius border-top-right-radius border-spacing border-top border-width border-top-width

box-shadow

clip

height min-height max-height

margin margin-top

opacity

outline-color outline-offset outline-width

padding padding-top

width min-width max-width

Positioning

top

right

bottom

left

offset-before offset-end offset-after offset-start

visibility

z-index

zoom

Multi-column layout

columns column-count column-gap column-rule column-rule-color column-rule-width column-width

Flexbox

flex flex-grow flex-shrink flex-basis

order

Transforms

perspective

perspective-origin

transform

transform-origin

SVG

fill fill-opacity

flood-color

lighting-color

marker-offset

stop-color stop-opacity

stroke stroke-dasharray stroke-dashoffset stroke-miterlimit stroke-opacity stroke-width

viewport-fill viewport-fill-opacity

カテゴリMENU
お問い合せ