CSS3

プロパティ

transition

→●、mdn

時間的変化： 略式プロパティ。

transition-property、transition-duration、transition-timing-function、transition-delay の略式プロパティ。

<single-transition>

＝[none | <single-transition-property>]
|| <time>
|| <easing-function>
|| <time>

<single-transition-property>

＝all | <custom-ident>

all

すべてのプロパティを遷移対象にすることを指示する。

<DIV style="border:1px solid black; width:200px; height:50px;
 position:relative;
">
 <SPAN id=IdallSpan style="border:1px solid red;
  position:absolute;
  left:0; font-size:30px;
  transition:all 3s 0s;
 ">テスト</SPAN>
</DIV>
<BUTTON onclick="IdallSpan.style.left='200px'; IdallSpan.style.fontSize='5px'">セット</BUTTON>

BUTTONで設定したプロパティが遷移する

<custom-ident> ○

遷移対象になるプロパティ名を指定する。

<DIV style=" border:1px solid #0008; width:200px; height:50px;
 position:relative;
">
 <SPAN id=IdcustomidentSpan style="border:1px solid red;
  position:absolute;
  left:0;
  transition:left 3s 0s;
 ">テスト</SPAN>
</DIV>
<BUTTON onclick="IdcustomidentSpan.style.left='200px'">セット</BUTTON>

custom-identはleftとした

<time> ○

プロパティ値の中のアイテムの順序は重要であることに注意。

1 個目のアイテムが、transition-duration（遷移の所要時間）にあてがわる。

2 個目のアイテムが、transition-delay（遷移の遅延）にあてがわれる。

すべての <time> 単位どうしは 互換である ― それらの正準単位は s とする。

プロパティには、時間値を一定範囲に制約するものもある。許容範囲外の値を伴う宣言は無効であり、無視するものとする。

<DIV style=" border:1px solid black; width:200px; height:50px;
 position:relative;
">
 <SPAN id=IdtimeSpan style="border:1px solid red;
  position:absolute;
  left:0;
  transition:left 1s 2s;
 ">テスト</SPAN>
</DIV>
<BUTTON onclick="IdtimeSpan.style.left='200px'">セット</BUTTON>

遷移に掛かる時間が1s、遅延が2s

none

この略式プロパティに複数個の <single-transition> が与えられていて、その中のいずれかの遷移に <single-transition-property> として none をとるものがある場合、その宣言全体が無効になる。

<a class="target">Hover over me</a>

.target {
  font-size: 14px;
  transition: font-size 4s 1s;
}

.target:hover {
  font-size: 36px;
}

テスト