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.
CSS transitions for multiple properties
You have correctly added a transition to the html element that is going to be "transitioned" from state x to state y. To engage multiple css properties, use commas, like this example:
transition: width 2s, height 2s, background-color 2s, transform 2s;
CSS transition shorthand with multiple properties?
Syntax:
transition: <property> || <duration> || <timing-function> || <delay> [, ...];
Note that the duration must come before the delay, if the latter is specified.
Individual transitions combined in shorthand declarations:
-webkit-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-moz-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-o-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
Or just transition them all:
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
Here is a straightforward example. Here is another one with the delay property.
Edit: previously listed here were the compatibilities and known issues regarding transition
. Removed for readability.
Bottom-line: just use it. The nature of this property is non-breaking for all applications and compatibility is now well above 94% globally.
If you still want to be sure, refer to http://caniuse.com/css-transitions
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>
How to have multiple CSS transitions on an element?
Transition properties are comma delimited in all browsers that support transitions:
.nav a {
transition: color .2s, text-shadow .2s;
}
ease
is the default timing function, so you don't have to specify it. If you really want linear
, you will need to specify it:
transition: color .2s linear, text-shadow .2s linear;
This starts to get repetitive, so if you're going to be using the same times and timing functions across multiple properties it's best to go ahead and use the various transition-*
properties instead of the shorthand:
transition-property: color, text-shadow;
transition-duration: .2s;
transition-timing-function: linear;
Detect if property is animatable by CSS3 transition?
Edit: see Jordan's answer for a good technique on detecting animatable properties.
I'm afraid there is no straightforward way to detect if a property is animatable. However, the properties are consistent for the most part (the only problem I've encountered is with FF4 transition + text shadow + transform).
http://www.w3.org/TR/css3-transitions/#the-transition-property-property-#properties-from-css-
Firefox 3.6 doesn't support css transitions, you can detect this with a js library such as Modernizr:
http://www.modernizr.com/
Can I apply a CSS transition to the overflow property?
There are many properties that can't be transitioned. overflow
is among them; the render engine has no idea how to transition between "hidden" and "shown", because those are binary options, not intervals. This is the same reason why you can't transition between display: none;
and display: block;
(for example): there are no in-between phases to use as transitions.
You can see a list of properties you can animate here on Mozilla Developer Network.
Related Topics
Prevent Background Image Flashing on Change
Fill Parent Container and Reduce Image Resolution with Next/Image
Easiest Way to Convert Polygon Clip-Path to Microsoft Edge Supported "Clippath" Svg
Google Chrome Bug - Overflow:Auto | Scroll Doesn't Work
Sass Replicating Nested Selector
Why Image-Path Is Not Resolved in SCSS
Bullet Point Background Color Attribute? CSS
Efficient Way to Place Orphaned Element(S) at Top/Beginning Using CSS Flexbox
How Does Bootstrap Switch from One Class to The Next
How to Get Page Content to Stretch and Stick Footer to Bottom of Page
Best Way to Add Background Image with CSS3 Filters
How to Put The Text of Footer in Center and The Links of Menu in Center and Next to Each Other