# CSS3 动画系列2-可以应用动画的css属性

日期：2013-11-22 来源：攀枝花惠康网络公司

此页面列出所有的CSS属性，如不美观可以做动画，那么会声名是若何做动画的。

`border-bottom-color`

yes, as a color
`border-bottom-left-radius`

yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
`border-bottom-right-radius`

yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
`border-bottom-style`

no
`border-bottom-width`

yes, as a length
`border-color`

as each of the properties of the shorthand:

`border-bottom-color`

: yes, as a color`border-left-color`

: yes, as a color`border-right-color`

: yes, as a color`border-top-color`

: yes, as a color

内容来自己https://developer.mozilla.org/zh-CN/docs/CSS/CSS_animated_properties

Animations Property Animatable`animation`

no
`animation-delay`

no
`animation-direction`

no
`animation-duration`

no
`animation-fill-mode`

no
`animation-iteration-count`

no

`animation-name`

no

`animation-play-state`

no
`animation-timing-function`

no
Transitions
Property
Animatable
`transition`

no
`transition-delay`

no
`transition-duration`

no
`transition-property`

no
`transition-timing-function`

no
Transforms
Property
Animatable
`transform`

yes, as a transform
`transform-origin`

yes, as a simple list of a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
`transform-style`

no
`perspective`

yes, as a length
`perspective-origin`

yes, as a simple list of a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
`backface-visibility`

no
Color
Property
Animatable
`color`

yes, as a color
`opacity`

yes, as a number
Columns
Property
Animatable
`columns`

as each of the properties of the shorthand:

`column-width`

: yes, as a length`column-count`

: yes, as an integer

`flex-wrap`

no
`justify-content`

no
`order`

yes, as an integer
Background & Borders
Property
Animatable
`background`

as each of the properties of the shorthand:

`background-color`

: yes, as a color`background-image`

: no`background-clip`

: no`background-position`

: yes, as a repeatable list of a simple list of a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.`background-size`

: yes, as a repeatable list of a simple list of a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers. . This means keyword values are not animatable.`background-repeat`

: no`background-attachment`

: no

`background-attachment`

no
`background-clip`

no
`background-color`

yes, as a color
`background-image`

no
`background-origin`

no
`background-position`

yes, as a repeatable list of a simple list of a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
`background-repeat`

no
`background-size`

yes, as a repeatable list of a simple list of a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers. . This means keyword values are not animatable.
`border`

as each of the properties of the shorthand:

`border-color`

: as each of the properties of the shorthand:`border-bottom-color`

: yes, as a color`border-left-color`

: yes, as a color`border-right-color`

: yes, as a color`border-top-color`

: yes, as a color

`border-style`

: no`border-width`

: as each of the properties of the shorthand:`border-bottom-width`

: yes, as a length`border-left-width`

: yes, as a length`border-right-width`

: yes, as a length`border-top-width`

: yes, as a length

`text-decoration-color`

yes, as a color
`text-decoration-style`

no
`text-decoration-line`

no
`text-decoration-skip`

no
`text-shadow`

yes, as a shadow list
`text-underline-position`

no
Flexible boxes
Property
Animatable
`align-content`

no
`align-items`

no
`align-self`

no
`flex-basis`

yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
`flex-direction`

no
`flex-flow`

no
`flex-grow`

yes, as a number, except between `0`

and other values
`flex-shrink`

yes, as a number, except between `0`

and other values
`flex`

as each of the properties of the shorthand:

`flex-grow`

: yes, as a number, except between`0`

and other values`flex-shrink`

: yes, as a number, except between`0`

and other values`flex-basis`

: yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.

`border-bottom`

as each of the properties of the shorthand:

`border-bottom-color`

: yes, as a color`border-bottom-style`

: no`border-bottom-width`

: yes, as a length

`border-image`

no
`border-image-outset`

no
`border-image-repeat`

no
`border-image-slice`

no
`border-image-source`

no
`border-image-width`

no
`border-left`

as each of the properties of the shorthand:

`border-left-color`

: yes, as a color`border-left-style`

: no`border-left-width`

: yes, as a length

`border-left-color`

yes, as a color
`border-left-style`

no
`border-left-width`

yes, as a length
`border-radius`

as each of the properties of the shorthand:

`border-top-left-radius`

: yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.`border-top-right-radius`

: yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.`border-bottom-right-radius`

: yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.`border-bottom-left-radius`

: yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.

`border-right`

as each of the properties of the shorthand:

`border-right-color`

: yes, as a color`border-right-style`

: no`border-right-width`

: yes, as a length

`column-rule-color`

yes, as a color
`column-rule-style`

no
`column-rule-width`

yes, as a length
`break-before`

no
`break-after`

no
`break-inside`

no
`column-span`

no
`column-fill`

no
Text
Property
Animatable
`hyphens`

no
`letter-spacing`

yes, as a length
`word-wrap`

no
`overflow-wrap`

no
`text-transform`

no
`tab-size`

no (This may change before the specification reaches Candidate Recommendation)
`text-align`

no
`text-align-last`

no
`text-indent`

yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
`direction`

no
`white-space`

no
`word-break`

no
`word-spacing`

yes, as a length
Text decorations
Property
Animatable
`text-decoration`

as each of the properties of the shorthand:

`text-decoration-color`

: yes, as a color`text-decoration-style`

: no`text-decoration-line`

: no

`border-right-color`

yes, as a color
`border-right-style`

no
`border-right-width`

yes, as a length
`border-style`

no
`border-top`

as each of the properties of the shorthand:

`border-top-color`

: yes, as a color`border-top-style`

: no`border-top-width`

: yes, as a length

`column-width`

yes, as a length
`column-count`

yes, as an integer
`column-gap`

yes, as a length
`column-rule`

as each of the properties of the shorthand:

`column-rule-color`

: yes, as a color`column-rule-style`

: no`column-rule-width`

: yes, as a length

`border-top-color`

yes, as a color
`border-top-left-radius`

yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
`border-top-right-radius`

yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
`border-top-style`

no
`border-top-width`

yes, as a length
`border-width`

as each of the properties of the shorthand:

`border-bottom-width`

: yes, as a length`border-left-width`

: yes, as a length`border-right-width`

: yes, as a length`border-top-width`

: yes, as a length

Box Model
Property
Animatable
`box-decoration-break`

no
`box-shadow`

yes, as a shadow list
`margin`

yes, as a length
`margin-bottom`

yes, as a length
`margin-left`

yes, as a length
`margin-right`

yes, as a length
`margin-top`

yes, as a length
`padding`

yes, as a length
`padding-bottom`

yes, as a length
`padding-left`

yes, as a length
`padding-right`

yes, as a length
`padding-top`

yes, as a length
`box-sizing`

no
`max-height`

yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
`min-height`

yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
`height`

yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
`max-width`

yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
`min-width`

yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
`width`

yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
`overflow`

no
`overflow-x`

no
`overflow-y`

no
`visibility`

yes, as a visibility
Table
Property
Animatable
`border-collapse`

no
`border-spacing`

no
`caption-side`

`empty-cells`

no
`table-layout`

no
`vertical-align`

yes, as a length
Positioning
Property
Animatable
`bottom`

yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
`left`

yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
`right`

yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
`top`

yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
`float`

no
`clear`

no
`position`

no
`z-index`

yes, as an integer
Fonts
Property
Animatable
`font`

as each of the properties of the shorthand:

`font-style`

: no`font-variant`

: no`font-weight`

: yes, as a font weight`font-stretch`

: yes, as a font stretch`font-size`

: yes, as a length`line-height`

: yes, as a number, a length`font-family`

: no

`font-family`

no
`font-variant`

no
`font-weight`

yes, as a font weight
`font-stretch`

yes, as a font stretch
`font-size`

yes, as a length
`line-height`

yes, as a number, a length
`font-feature-settings`

no
`font-size-adjust`

yes, as a number
`font-style`

no
Images
Property
Animatable
`image-rendering`

no
`image-orientation`

no
Counters & Lists
Property
Animatable
`counter-increment`

no
`counter-reset`

no
`list-style`

no
`list-style-image`

no
`list-style-position`

no
`list-style-type`

no
Page
Property
Animatable
`orphans`

no
`page-break-after`

no
`page-break-before`

no
`page-break-inside`

no
`widows`

no
User interface
Property
Animatable
`outline`

as each of the properties of the shorthand:

`outline-color`

: yes, as a color`outline-width`

: yes, as a length`outline-style`

: no

`outline-color`

yes, as a color
`outline-width`

yes, as a length
`outline-style`

no
`outline-offset`

yes, as a length
`cursor`

no
`resize`

no
`text-overflow`

no
Generated content
Property
Animatable
`content`

no
`quotes`

no
Miscellaneous
Property
Animatable
`clip`

yes, as a rectangle
`display`

no
`unicode-bidi`

no
`ime-mode`

no

文章来源：攀枝花惠康网络公司

惠康网络，是一家专业从事攀枝花网站建设，攀枝花网站制作，攀枝花网站设计公司，提供网站建设一条龙服务（网站域名注册+网站服务器租用+网站开发+网站维护+网站营销推广），惠康网络立足攀枝花，辐射全中国，攀枝花惠康网络的客户已经遍布国内各地大中小城市，我们高效优质的网站建设服务深受用户好评。