CSSトランジション CSSプロパティを変更するとき、アニメーションの速度を制御するための方法を提供します。
どのプロパティがいくつかの時間のためのコースの変更はなく、即効性にすることができます。例えば、白から黒への色の要素が、この変化は、速度曲線における特定の変化に応じて、白から黒へ徐々に色要素CSS遷移の使用後、すぐに一般的に有効です。このプロセスは、カスタマイズすることができます。
CSSの遷移が（遅延設定）を開始するときに、（具体的にこれらの属性をリストする）アニメーションを発生する特性を決定することができ、どのくらいの時間（設定時間）とどのようにアニメートする（で定義されたタイミング目的球例えば一定の速度又は後にスローダウンしたように、）。
アニメーションは、ある属性のリストを指定できます。
-moz-outline-radius
-moz-outline-radius-bottomleft
-moz-outline-radius-bottomright
-moz-outline-radius-topleft
-moz-outline-radius-topright
-webkit-text-fill-color
-webkit-text-stroke
-webkit-text-stroke-color
all
backdrop-filter
background
background-color
background-position
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-width
border-color
border-end-end-radius
border-end-start-radius
border-left
border-left-color
border-left-width
border-radius
border-right
border-right-color
border-right-width
border-start-end-radius
border-start-start-radius
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-width
border-width
bottom
box-shadow
caret-color
clip
clip-path
color
column-count
column-gap
column-rule
column-rule-color
column-rule-width
column-width
columns
filter
flex
flex-basis
flex-grow
flex-shrink
font
font-size
font-size-adjust
font-stretch
font-variation-settings
font-weight
gap
grid-column-gap
grid-gap
grid-row-gap
grid-template-columns
grid-template-rows
height
inset
inset-block
inset-block-end
inset-block-start
inset-inline
inset-inline-end
inset-inline-start
left
letter-spacing
line-clamp
line-height
margin
margin-bottom
margin-left
margin-right
margin-top
mask
mask-border
mask-position
mask-size
max-height
max-lines
max-width
min-height
min-width
object-position
offset
offset-anchor
offset-distance
offset-path
offset-position
offset-rotate
opacity
order
outline
outline-color
outline-offset
outline-width
padding
padding-bottom
padding-left
padding-right
padding-top
perspective
perspective-origin
right
rotate
row-gap
scale
scroll-margin
scroll-margin-block
scroll-margin-block-end
scroll-margin-block-start
scroll-margin-bottom
scroll-margin-inline
scroll-margin-inline-end
scroll-margin-inline-start
scroll-margin-left
scroll-margin-right
scroll-margin-top
scroll-padding
scroll-padding-block
scroll-padding-block-end
scroll-padding-block-start
scroll-padding-bottom
scroll-padding-inline
scroll-padding-inline-end
scroll-padding-inline-start
scroll-padding-left
scroll-padding-right
scroll-padding-top
scroll-snap-coordinate
scroll-snap-destination
scrollbar-color
shape-image-threshold
shape-margin
shape-outside
tab-size
text-decoration
text-decoration-color
text-emphasis
text-emphasis-color
text-indent
text-shadow
top
transform
transform-origin
translate
vertical-align
visibility
width
word-spacing
z-index
zoom例：
<body>
<p>盒子的多个属性一起动画: width, height, background-color, transform. 将光标悬停在盒子上查看动画。</p>
<div></div>
</body>
.box {
border-style: solid;
border-width: 1px;
display: block;
width: 100px; /*初始值*/
height: 100px; /*初始值*/
background-color: #0000FF; /*初始值*/
-webkit-transition:width 2s, height 2s,
background-color 2s, -webkit-transform 2s;
transition:width 2s, height 2s, background-color 2s, transform 2s;
}
/*鼠标悬浮的时候触发动画样式*/
.box:hover {
background-color: #FFCCCC; /*在2s内变成#FFCCCC*/
width:200px; /*在2s内变成200*/
height:200px; /*在2s内变成200*/
-webkit-transform:rotate(180deg);
transform:rotate(180deg); /*在2s内旋转180度*/
}
web前端开发学习Q-q-u-n： ⑦⑧④-⑦⑧③-零①② ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频遷移は、無限ループではありません。
遷移複数のは、簡略性属性値です。それは順番に、含まれています。
トランジション・プロパティの移行のためのCSSのどのプロパティを指定します。唯一の指定された属性は、他のプロパティは、通常の瞬間的な変化としてはまだです、トランジションアニメーションに発生します。
遷移期間は、遷移の長さを指定します。あなたが長い複数を指定することができ、それぞれの持続時間は、対応する属性で指定遷移プロパティに適用されます。数は、属性の長さが指定された数より少ない場合、長いリストが繰り返されます。リストの長さが長い場合、そのリストは、解雇されます。
タイミング機能の遷移は、中間値を変更する遷移によって影響CSS特性は、生成され、transition-timing-function属性が中間値を計算方法を説明するために使用されます。本質的に、加速度プロファイルを確立することによって、この機能ので、変化の全体移行プロセスは、変化の速度が変化してもよいです。この加速度プロファイルは、各CSSプロパティに次にトランジション効果、遷移タイミング関数によって定義されます。これは、それぞれのCSSプロパティアプリケーション・タイミング機能のそれぞれへの遷移プロパティのリストに従って、タイミング機能の複数を提供することができます。転移性の数よりも少ない数のタイミング機能場合、欠落している値を初期値（やすさ）に設定されています。タイミング関数は複数の遷移プロパティよりもする場合は、タイミング関数機能リストは適当な大きさに切り捨てられます。
遷移タイミング関数値：
transition-timing-function: ease
transition-timing-function: ease-in
transition-timing-function: ease-out
transition-timing-function: ease-in-out
transition-timing-function: linear
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1)
transition-timing-function: step-start
transition-timing-function: step-end
transition-timing-function: steps(4, end)