What CSS Properties Can Be Animated

What are the waapi valid css properties

To answer your question simply, there is no difference in the set of animatable CSS properties. Technically speaking, CSS animation is a subset of Web Animations.

There is no list of animatable properties in the DOM. To determine if a property is animatable you can create an animation, or set the keyframes on an existing animation (using setKeyframes()) and then read back the keyframes using getKeyframes() to see if it appears there.

That's the summary, but here are a few more points that might prove interesting depending on what you're trying to do:

• The set of properties that can be animated by CSS transitions is a subset of those that can be animated by CSS animations and Web Animations. These are called transitionable properties.

• The set of properties that can be animated by Web Animations is technically a subset of those animatable by CSS animations but in practice they are the same (although see the next point). It is possible, for example, that in future Web Animations might be able to animate the display property but CSS Animations will never be able to do so.

• Web animations technically allows prefixed properties to be animated but Safari and Chrome don't support this and Firefox and the spec will likely be changed to match. (For more details see this spec issue.)

• Registered custom properties can also be animated by Web Animations although this is not implemented everywhere.

• A couple of properties have special names when used in Web Animation keyframes to avoid conflicts, notably cssFloat (for 'float') and cssOffset (for 'offset').

So, to generate a comprehensive list of animatable properties you would probably need
to look at the properties exposed on something like the result of
getComputedStyle(), add in any registered custom properties, possibly drop any prefixed properties, convert offset to cssOffset, and then run them all through setKeyframes()/getKeyframes() to see which ones the browser supports animating.

Allowed properties for CSS transition-property

For the properties that existed at the time of creating the CSS Transitions Module, the list can be found in the specification itself:

http://www.w3.org/TR/css3-transitions/#animatable-properties

For future properties or future changes to existing properties, refer to the properties in the specification for an Animatable line:

For properties that exist at the time this specification was developed, this specification defines whether and how they are animated. However, future CSS specifications may define additional properties, additional values for existing properties, or additional animation behavior of existing values. In order to describe new animation behaviors and to have the definition of animation behavior in a more appropriate location, future CSS specifications should include an "Animatable:" line in the summary of the property's definition (in addition to the other lines described in [CSS21], section 1.4.2). This line should say "no" to indicate that a property cannot be animated or should reference an animation behavior (which may be one of the behaviors in the Animation of property types section above, or may be a new behavior) to define how the property animates. Such definitions override those given in this specification.

Example:

There's also a list on the MDN itself.

Why can't I animate custom properties (aka CSS variables)?

When this question was asked, it wasn't possible to animate custom properties, as @temani afif correctly pointed out -

since the UA has no way to interpret their contents

Since then, CSS Houdini have put together the CSS Properties and Values API specification

This specification extends [css-variables], allowing the registration
of properties that have a value type, an initial value, and a defined
inheritance behaviour, via two methods:

A JS API, the registerProperty() method

A CSS at-rule, the @property rule

So now that you can register your own custom properties - including the type of the custom property - animating the custom property becomes possible.

To register the custom property via CSS - use the @property rule

@property --o {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

#one {
  width: 50px;
  height: 50px;
  background-color: gold;
  --o: 0;
  animation: roll-o-1 2s infinite alternate ease-in-out both;
  position: relative;
  left: calc(var(--o) * 1px);
}

@keyframes roll-o-1 {
  0% {
    --o: 0;
  }
  50% {
    --o: 50;
  }
  100% {
    --o: 100;
  }
}

#two {
  width: 50px;
  height: 50px;
  background-color: silver;
  animation: roll-o-2 2s infinite alternate ease-in-out both;
  position: relative;
}

@keyframes roll-o-2 {
  0% {
    left: 0px;
  }
  50% {
    left: 50px;
  }
  100% {
    left: 100px;
  }
}

@property --o {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

<div id="one"></div>
<br>
<div id="two"></div>

Transitions on the CSS display property

You can concatenate two transitions or more, and visibility is what comes handy this time.

div {  border: 1px solid #eee;}div > ul {  visibility: hidden;  opacity: 0;  transition: visibility 0s, opacity 0.5s linear;}div:hover > ul {  visibility: visible;  opacity: 1;}

<div>  <ul>    <li>Item 1</li>    <li>Item 2</li>    <li>Item 3</li>  </ul></div>

---

Related Topics