CSS3 – Animatable Properties

Following is a list of animatable properties as given in the CSS Transitions specification. Because this only lists the CSS 2.1 properties that are animatable, it is not complete, but it is illustrative for understanding which kinds of properties are animatable and in what ways, and which properties are not.

  Property name Interpolation
Color
  color as color
  opacity as number
columns
  column-width as length
  column-count as integer
  column-gap as length
  column-rule (see longhands)  
  column-rule-color: as color
  column-rule-style: no
  column-rule-width: as length
  break-before no
  break-after no
  break-inside no
  column-span no
  column-fill no
text
  hyphens no
  letter-spacing as length
  word-wrap no
  overflow-wrap no
  text-transform no
  tab-size as length
  text-align no
  text-align-last no
  text-indent as length, percentage, or calc();
  direction no
  white-space no
  word-break no
  word-spacing as length
  line-break no
Text decorations
  text-decoration-color: as color
  text-decoration-style: no
  text-decoration-line: no
  text-decoration-skip no
  text-shadow as shadow list
  text-underline-position no
Flexible boxes
  align-content no
  align-items no
  align-self no
  flex-basis as length, percentage, or calc();
  flex-direction no
  flex-flow no
  flex (see longhand)  
  flex-grow as number
  flex-shrink as number
  flex-basis: as length, percentage, or calc();
  flex-wrap no
  justify-content no
  order as integer
Background and borders
  background  
  background-color: as color
  background-image: no
  background-clip: no
  background-position: as list of length, percentage, or calc
  background-size: as list of length, percentage, or calc
  background-repeat: no
  background-attachment no
  abackground-origin no
Borders
  border (see longhand)  
  border-color as color
  border-style no
  border-width as length
  border-radius as length, percentage, or calc();
  border-image no (see longhand)
  border-image-outset no
  border-image-repeat no
  border-image-slice no
  border-image-source no
  border-image-width no
Box model
  box-decoration-break no
  box-shadow as shadow list
  margin as length
  padding as length
  box-sizing no
  max-height as length, percentage, or calc();
  min-height as length, percentage, or calc();
  height as length, percentage, or calc();
  max-width as length, percentage, or calc();
  min-width as length, percentage, or calc();
  width as length, percentage, or calc();
  overflow no
  visibility as visibility (see “How Property Values Are Interpolated”)
Table
  border-collapse no
  border-spacing no
  caption-side no
  empty-cells no
  table-layout no
  vertical-align as length
Positioning
  bottom as length, percentage, or calc();
  left as length, percentage, or calc();
  right as length, percentage, or calc();
  top as length, percentage, or calc();
  float no
  clear no
  position no
  z-index as integer
Fonts
  font (see longhand)  
  font-style no
  font-variant no
  font-weight as font weight
  font-stretch as font stretch
  font-size as length
  line-height as number, length
  font-family no
  font-variant-ligatures no
  font-feature-settings no
  font-language-override no
  font-size-adjust as number
  font-synthesis no
  font-kerning no
  font-variant-position no
  font-variant-caps no
  font-variant-numeric no
  font-variant-east-asian no
  font-variant-alternates no
Images
  object-fit no
  object-position as length, percentage, or calc();
  image-rendering no
  image-orientation no
Counters, lists, and generated content
  content no
  quotes no
  counter-increment no
  counter-reset no
  list-style no
  list-style-image no
  list-style-position no
  list-style-type no
Page
  orphans no
  page-break-after no
  page-break-before no
  page-break-inside no
  widows no
User interface
  outline (see longhand)  
  outline-color as color
  outline-width as length
  outline-style no
  outline-offset as length
  cursor no
  resize no
  text-overflow no
Animations
  animation no (see longhands)
  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, though animation-timing-function can be included in keyframes
Transitions
  transition no (see longhands)
  transition-delay no
  transition-duration no
  transition-property no
  transition-timing-function no
Transform properties
  transform as transform (see Transforms in CSS [O’Reilly])
  transform-origin as length, percentage or calc();
  transform-style no
  perspective as length
  perspective-origin as simple list of a length, percentage or calc();
  backface-visibility no
Compositing and blending
  background-blend-mode no
  mix-blend-mode no
  isolation no
Shapes
  shape-outside yes, as basic-shape
  shape-margin as length, percentage, or calc();
  shape-image-threshold as number
Miscellaneous
  clip (deprecated) as rectangle
  display no
  unicode-bidi no
  text-orientation no
  ime-mode no
  all as each of the properties of the shorthand (all properties but unicode-bidi and direction)
  will-change no
  box-decoration-break no
  touch-action no
  initial-letter no
  initial-letter-align no

Comments are closed.