上一篇提到 @keyframes 裡面可以放 width。
這篇要來深入了解到底還有什麼特性可以寫在 @keyframes 裡面,以下稍微依功能做了整理。其實這些根本幾乎是全部的 css 了啊
基本上下面列出所有的 css 屬性都可以寫到 @keyframes 裡,不過這邊有一點要稍微注意下,就是在 @keyframes 裡面寫 !important 是完全不會有效果的。
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-left
border-left-color
border-left-width
border-radius
border-right
border-right-color
border-right-width
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-width
border-width
bottom
left
right
top
box-shadow
text-shadow
clip
clip-path
mask
mask-border
mask-position
mask-size
filter
flex
flex-basis
flex-grow
flex-shrink
order
caret-color (鍵入游標)
color
font
font-size
font-weight
text-decoration
text-decoration-color
height
width
max-height
max-width
min-height
min-width
letter-spacing
line-height
word-spacing
text-indent (段落內縮)
margin
margin-bottom
margin-left
margin-right
margin-top
padding
padding-bottom
padding-left
padding-right
padding-top
opacity
outline
outline-color
outline-offset
outline-width
perspective
perspective-origin
shape-image-threshold
shape-margin
shape-outside
rotate
transform
transform-origin
scale
vertical-align
visibility
z-index
-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
個人覺得使用機率也算低
column-count
column-gap
column-width
columns
column-rule
column-rule-color
column-rule-width
gap
grid-column-gap
grid-gap
grid-row-gap
row-gap
基本上可以跳過 嘿嘿
all
font-size-adjust
font-stretch
font-variation-settings
inset-block-end
inset-block-start
inset-inline-end
inset-inline-start inset-block-end
inset-block-start
inset-inline-end
inset-inline-start
line-clamp
max-lines
motion-offset
motion-rotation
object-position
offset-position
scroll-snap-coordinate
scroll-snap-destination
tab-size
text-emphasis
text-emphasis-color
translate
zoom
參考資料
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties