web前端入門到實戰：css3動畫 Transition

時間 2019-12-22

標籤 web 前端入門實戰 css3 css 動畫 transition 欄目 HTML 简体版

原文原文鏈接

CSS transitions 提供了一種在更改CSS屬性時控制動畫速度的方法。前端

其可讓屬性變化成爲一個持續一段時間的過程，而不是當即生效的。好比，將一個元素的顏色從白色改成黑色，一般這個改變是當即生效的，使用 CSS transitions 後該元素的顏色將逐漸從白色變爲黑色，按照必定的曲線速率變化。這個過程能夠自定義。web

CSS transitions 能夠決定哪些屬性發生動畫效果 (明確地列出這些屬性)，什麼時候開始 (設置 delay），持續多久 (設置 duration) 以及如何動畫 (定義timing funtion，好比勻速地或先快後慢)。ide

可動畫屬性的列表是：函數

-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： ⑦⑧④-⑦⑧③-零①② ，分享學習的方法和須要注意的小細節，不停更新最新的教程和學習方法（詳細的前端項目實戰教學視頻

transition沒有無限循環。flex

transition是由多個屬性值組成的簡寫屬性。依次包括：動畫

transition-property指定哪一個或哪些 CSS 屬性用於過渡。只有指定的屬性纔會在過渡中發生動畫，其它屬性仍如一般那樣瞬間變化。spa

transition-duration指定過渡的時長。能夠指定多個時長，每一個時長會被應用到由transition-property指定的對應屬性上。若是指定的時長個數小於屬性個數，那麼時長列表會重複。若是時長列表更長，那麼該列表會被裁減。code

transition-timing-function CSS屬性受到transition的影響，會產生不斷變化的中間值，而transition-timing-function 屬性用來描述這個中間值是怎樣計算的。實質上，經過這個函數會創建一條加速度曲線，所以在整個transition變化過程當中，變化速度能夠不斷改變。這條加速度曲線被transition-timing-function所定義，以後做用到每一個CSS屬性的過渡。能夠規定多個timing function，根據transition property的列表給每一個CSS屬性應用相應的timing function。若是timing function的個數比transition property中數量少，缺乏的值被設置爲初始值（ease）。若是timing function比transition property要多，timing function函數列表會被截斷至合適的大小。orm

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)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。