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 no 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