CSS3

CSS関数

steps()

[Edge]○。→●、mdn

段数（transition用）。

<integer> ○

段数 を与え、関数における時区間の個数を指定する。値は［2 個目のパラメーターが jump-none の場合は 2 以上／他の場合は 1 以上］の整数でなければならない。

<DIV style="border:1px solid black; width:200px; height:50px;
 position:relative;
">
 <SPAN id=IdintegerSpan style="border:1px solid red;
  position:absolute;
  left:0;
  transition:left 3s steps(5,jump-start) 0s;
 ">テスト</SPAN>
</DIV>
<BUTTON onclick="IdintegerSpan.style.left='200px'">セット</BUTTON>

<step-position>

＝jump-start
| jump-end
| jump-none
| jump-both
| start
| end

段位置 を指定する ― それは、入力進捗値［0 の所、1 の所 ］で“段差”（出力進捗値の変化）が生じるかどうかを定義する。

jump-start

入力進捗値［0／1］の所で段差は［生じる／生じない］。

steps(3,jump-start)

<DIV style="border:1px solid black; width:200px; height:50px;
 position:relative;
">
 <SPAN id=Idsteps3jumpstartSpan style="border:1px solid red;
  position:absolute;
  left:0;
  transition:left 3s steps(3,jump-start) 0s;
 ">テスト</SPAN>
</DIV>
<BUTTON onclick="Idsteps3jumpstartSpan.style.left='200px'">セット</BUTTON>

jump-end

入力進捗値［0／1］の所で段差は［生じない／生じる］。

steps(3,jump-end)

<DIV style=" border:1px solid black; width:200px; height:50px;
 position:relative;
">
 <SPAN id=Idsteps3jumpendSpan style="border:1px solid red;
  position:absolute;
  left:0;
  transition:left 3s steps(3,jump-end) 0s;
 ">テスト</SPAN>
</DIV>
<BUTTON onclick="Idsteps3jumpendSpan.style.left='200px'">セット</BUTTON>

¶

jump-none

入力進捗値［0／1］の所で段差は生じる。

steps(3,jump-none)

<DIV style=" border:1px solid black; width:200px; height:50px;
 position:relative;
">
 <SPAN id=Idsteps3jumpnoneSpan style="border:1px solid red;
  position:absolute;
  left:0;
  transition:left 3s steps(3,jump-none) 0s;
 ">テスト</SPAN>
</DIV>
<BUTTON onclick="Idsteps3jumpnoneSpan.style.left='200px'">セット</BUTTON>

jump-both

入力進捗値［0／1］の所で段差は生じない。

steps(3,jump-both)

<DIV style=" border:1px solid black; width:200px; height:50px;
 position:relative;
">
 <SPAN id=Idsteps3jumpbothSpan style="border:1px solid red;
  position:absolute;
  left:0;
  transition:left 3s steps(3,jump-both) 0s;
 ">テスト</SPAN>
</DIV>
<BUTTON onclick="Idsteps3jumpbothSpan.style.left='200px'">セット</BUTTON>

start

jump-start としてふるまう。

end

jump-end としてふるまう。

テスト