となります。 -遅延> はデフォルト値 0
transition: <transition-property> || <transition-duration> ||
<transition-timing-function> || <transition-delay></transition-delay></transition-timing-function></transition-duration></transition-property>
[注意] トランジションの 4 つのサブプロパティはカンマで区切ることはできず、スペースでのみ区切ることができます。カンマで区切られたものは異なる属性を表すため (遷移属性は複数値をサポートしているため、複数値部分については後で説明します)、スペースで区切られたものはさまざまな属性の遷移に関する 4 つのサブ属性を表します。 .test {
border: 1px solid red;
width: 100px;
height: 50px;
transition: 2s;/*代表持续时间为2s，延迟时间为默认值0 */
/* transition: 1s 2s; 代表持续时间为1s，延迟时间为2s */
}
.test:hover {
width: 300px;
} <div class="test"></div>
関連サブプロパティ
1、transition-property
transition-propertyこの属性は、CSS 属性の nametransition 効果を指定します (transition 効果は、指定された CSS 属性の変更を開始します)。 none: スタイルは指定されません。all: デフォルト値。指定された要素のすべてのスタイルがtransition-property属性をサポートすることを示します。 <transition-property>: 遷移可能なスタイル。カンマで区切って複数のスタイルを記述できます。 </transition-property>
注: 常に transition-duration 属性を指定してください。そうでない場合、期間は 0 になり、トランジションは効果がありません。
1)、移行可能なスタイル
すべての CSS スタイル値を移行できるわけではありません。次のように、中間値を持つ属性のみが移行効果を持ちます
颜色: color background-color border-color outline-color
位置: backround-position left right top bottom
长度:
[1]max-height min-height max-width min-width height width
[2]border-width margin padding outline-width outline-offset
[3]font-size line-height text-indent vertical-align
[4]border-spacing letter-spacing word-spacing
数字: opacity visibility z-index font-weight zoom
组合: text-shadow transform box-shadow clip
其他: gradient
.test {
border: 1px solid red;
width: 100px;
height: 50px;
background-color: lightblue;
transition: width 2s, background-color 2s ease 0.5s;
/*代表width持续时间为2s，延迟时间为默认值0；
background-color持续时间2s 延迟0.5s */
}
.test:hover {
width: 300px;
background-color: indianred;
}レンダリング:
2. Transition-duration
transition-duration 属性は、完了までにかかる時間を指定します。トランジション効果 (秒またはミリ秒単位)。デフォルト値: 0 秒。
[注意]この属性を負の値にすることはできません。 [注意] この属性が 0 の場合はデフォルト値、0 の場合は無効な値です。したがって、本体を持参する必要があります。 [注意] 値が単一値の場合、つまりすべての遷移属性が同じ時間に対応しますが、値が複数の場合、遷移属性は順番に継続時間に対応します。 3. Transition-timing-function
transition-timing-function属性は、スイッチング効果の速度を指定します。複数の値を取ることができます。デフォルト値: 容易。
#Value | Description |
#linear | は、で指定されますトランジション効果の開始と終了は同じ速度、つまり均一の速度で行われます。 (cubic-bezier(0,0,1,1) と等しい)。 |
ease | ゆっくり始まり、次に速くなり、ゆっくりと終わるトランジション効果を指定します (cubic-bezier(0.25,0.1,0.25,1))。 |
ease-in | 低速で開始するトランジション エフェクトを指定します (cubic-bezier(0.42,0,1,1) と同等)。 |
ease-out | 低速で終了するトランジション エフェクトを指定します (cubic-bezier(0,0,0.58,1) と同等)。 |
ease-in-out | 低速で開始および終了するトランジション エフェクトを指定します (cubic-bezier(0.42,0,0.58,1) と同等) ）。 |
cubic-bezier(n,n,n,n) | cubic-bezier 関数で独自の値を定義します。可能な値は 0 ～ 1 です。 |
4、transition-delay
transition-delay属性指定何时将开始切换效果，值是指以秒为单位（S）或毫秒（ms）。默认值：0s。
[注意]该属性若为负值，无延迟效果，但过渡元素的起始值将从0变成设定值(设定值=延迟时间+持续时间)。若该设定值小于等于0，则无过渡效果；若该设定值大于0，则过渡元素从该设定值开始完成剩余的过渡效果 [注意]若该属性为0s则为默认值，若为0则为无效值。所以必须带单位 。
[注意]该值为单值时，即所有过渡属性都对应同样时间；该值为多值时，过渡属性按照顺序对应持续时间 。
过渡阶段
过渡开始时间=样式改变的时刻+过渡延迟时间；而过渡结束时间=过渡开始时间+过渡持续时间。
过渡起始值=过渡前的过渡属性值；而过渡结束值=过渡完成后的过渡属性值 。
过渡分为两个阶段：前进(forward)和反向(reverse)。若前进阶段进行一段时间后进入反向阶段，则反向阶段的初始值是前进阶段结束时的瞬时值
以hover为例，若在元素非hover态时设置transition，相当于设置的反向状态。而前进和反向是一致的。而如果在元素hover态设置transition，则前进状态以hover态设置的为准，而反向状态以非hover态设置的为准 。
.test {
border: 1px solid red;
width: 100px;
height: 50px;
transition: 3s;/* 设置反向状态 */
}
.test:hover {
width: 300px;
transition: 100ms;
}效果:
触发方式
一般地，过渡transition的触发有三种方式，分别是伪类触发、媒体查询触发和javascript触发。其中常用伪类触发包括:hover、:focus、:active等 。
/* 把浏览器的宽度拖动到小于1000px时触发 */
@media (max-width: 1000px){
.test{
width: 500px;
}
}
（学习视频分享：css视频教程）
