css3動畫 Transition
阿新 • • 發佈：2020-10-14
csstransitions提供了一種在更改css屬性時控制動畫速度的方法。
其可以讓屬性變化成為一個持續一段時間的過程，而不是立即生效的。比如，將一個元素的顏色從白色改為黑色，通常這個改變是立即生效的，使用 CSS transitions 後該元素的顏色將逐漸從白色變為黑色，按照一定的曲線速率變化。這個過程可以自定義。
CSS transitions可以決定哪些屬性發生動畫效果 (明確地列出這些屬性)，何時開始 (設定 delay），持續多久 (設定 duration) 以及如何動畫 (定義timing funtion，比如勻速地或先快後慢)。
可動畫屬性的列表是：
-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
屬性詳情請參考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_animated_properties
廣州設計公司https://www.houdianzi.com 我的007辦公資源網站https://www.wode007.com
例子：
<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度*/
}
transition沒有無限迴圈。
transition是由多個屬性值組成的簡寫屬性。依次包括：
transition-property指定哪個或哪些 CSS 屬性用於過渡。只有指定的屬性才會在過渡中發生動畫，其它屬性仍如通常那樣瞬間變化。
transition-duration指定過渡的時長。可以指定多個時長，每個時長會被應用到由transition-property指定的對應屬性上。如果指定的時長個數小於屬性個數，那麼時長列表會重複。如果時長列表更長，那麼該列表會被裁減。
transition-timing-functionCSS屬性受到transition的影響，會產生不斷變化的中間值，而transition-timing-function
transition-timing-function的取值：
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)