transition-property

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 2015 年 9 月以來，該特性已在各大瀏覽器中可用。

transition-property CSS 屬性設定將應用過渡效果的 CSS 屬性。

試一試

transition-property: margin-right;

transition-property: margin-right, color;

transition-property: all;

transition-property: none;

<section id="default-example">
  <div id="example-element">Hover to see<br />the transition.</div>
</section>

#example-element {
  background-color: #e4f0f5;
  color: black;
  padding: 1rem;
  border-radius: 0.5rem;
  font: 1em monospace;
  width: 100%;
  transition: margin-right 2s;
}

#default-example:hover > #example-element {
  background-color: #990099;
  color: white;
  margin-right: 40%;
}

如果你指定一個縮寫屬性（例如，background），它所有可動畫化的長式子屬性都將被動畫化。

語法

css

/* Keyword values */
transition-property: none;
transition-property: all;

/* <custom-ident> values */
transition-property: test_05;
transition-property: -specific;
transition-property: sliding-vertically;

/* Multiple values */
transition-property: test1, animation4;
transition-property: all, height, color;
transition-property:
  all,
  -moz-specific,
  sliding;

/* Global values */
transition-property: inherit;
transition-property: initial;
transition-property: revert;
transition-property: revert-layer;
transition-property: unset;

值

none: 沒有屬性會進行過渡。
all: 所有可過渡的屬性都將過渡。
<custom-ident>: 一個字串，用於標識當其值改變時應應用過渡效果的屬性。

正式定義

初始值	all
應用於	所有元素，`::before` 和 `::after` 偽元素
繼承性	否
計算值	同指定值
動畫型別	不可動畫化

正式語法

transition-property = 
  none                           |
  <single-transition-property>#  

<single-transition-property> = 
  all             |
  <custom-ident>

示例

基本示例

當按鈕被懸停或聚焦時，它會經歷一個一秒鐘的顏色過渡；transition-property 是 background-color。

HTML

html

<button class="target">Focus me!</button>

CSS

html {
  height: 100vh;
}

button {
  font-size: 1.4rem;
  padding: 10px 20px;
  border: 1px solid #cccccc;
  border-radius: 10px;
  outline: none;
}

css

.target {
  transition-property: background-color;
  transition-duration: 1s;
  background-color: #cccccc;
}

.target:hover,
.target:focus {
  background-color: #eeeeee;
}

有關更多 transition-property 示例，請參閱我們的使用 CSS 過渡指南。

規範

規範
CSS 過渡 # transition-property-property

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

本頁面最後由MDN 貢獻者於2025 年 8 月 13 日修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題