449

It's a pretty straightforward question but I can't find very good documentation on the CSS transition properties. Here is the CSS snippet:

    .nav a
{
    text-transform:uppercase;
    text-decoration:none;
    color:#d3d3d3;
    line-height:1.5 em;
    font-size:.8em;
    display:block;
    text-align:center;
    text-shadow: 0 -1.5em 0 rgba(255, 255, 255, 0.15);
    -webkit-transition: color .2s linear;
    -moz-transition: color .2s linear;
    -o-transition: color .2s linear;
    transition: color .2s linear;
    -webkit-transition: text-shadow .2s linear;
    -moz-transition: text-shadow .2s linear;
    -o-transition: text-shadow .2s linear;
    transition: text-shadow .2s linear;
}

.nav a:hover
{
    color:#F7931E;
    text-shadow: 0 1.5em 0 rgba(247, 147, 30, 0.15);
}

As you can see, the transition properties are overwriting eachother. As it stands, the text-shadow will animate, but not the color. How do I get them both to simultaneously animate? Thanks for any answers.

Andreas Köberle
  • 106,652
  • 57
  • 273
  • 297
Eric Thoma
  • 5,905
  • 6
  • 30
  • 40
  • 2
    Dont forget that `transition: all` is very buggy for safari/ipad: http://joelglovier.com/writing/solution-for-css-transitions-crashing-safari/ – Oğuzhan Kahyaoğlu Jun 24 '15 at 10:37

8 Answers8

800

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;
coreyward
  • 77,547
  • 20
  • 137
  • 166
  • 13
    I assume because transform is a chain where order matters, so the syntax feels nice if you're used to functional chaining, whereas transition requires an unordered list of entirely independent elements, so commas are appropriate – mirichan Mar 10 '16 at 13:36
  • 4
    As a general comment about transitions in CSS, one should keep in mind that having multiple transition definitions one after the other will not work, and for accomplishing that, these must be in the same definition (as in the SA here). By the basic rules of CSS, the "latest" rule applies, so if there are multiple definitions in separate lines, only the last definition will be applied. FYI – TheCuBeMan Aug 15 '18 at 07:30
41

EDIT: I'm torn on whether to delete this post. As a matter of understanding the CSS syntax, it's good that people know all exists, and it may at times be preferable to a million individual declarations, depending on the structure of your CSS. On the other hand, it may have a performance penalty, although I've yet to see any data supporting that hypothesis. For now, I'll leave it, but I want people to be aware it's a mixed bag.

Original post:

You can also simply significantly with:

.nav a {
    transition: all .2s;
}

FWIW: all is implied if not specified, so transition: .2s; will get you to the same place.

XML
  • 19,206
  • 9
  • 64
  • 65
  • 51
    You can actually remove 'all' as that is the default unless otherwise specified. – joshnh Sep 08 '12 at 07:07
  • 17
    +1 for an excellent point, but I think it is usefully explicit to keep it there, particularly for consistency and understanding across teams. – XML Oct 02 '12 at 23:07
  • 4
    Beware this! If developing for mobiles, in combination with hardware accelerated elements, makes new devices glitchy and old devices unusable. – Ilya Karnaukhov Sep 19 '14 at 11:09
  • Thanks, @IlyaKarnaukhov. Some references/examples would make that a vastly more useful comment, particularly given that it's a rather broad assertion... – XML Sep 21 '14 at 07:56
  • Never use "all" unless it is absolutely necessary. Using "all" is so expensive for performance. – Caner Şahin Nov 18 '14 at 14:45
  • 2
    Thanks, @CanerŞahin. Can you give us any documentation or benchmarking tools that will help people to understand this point? Also, do you see evidence that shows 'all' to be worse than using no specifier at all? – XML Nov 18 '14 at 22:48
  • As Ilya Karnaukhov points out this should be avoided due to performance issues on mobiles and other devices. – Stefan Burt May 24 '17 at 09:27
  • 1
    @StefanBurt: if you can provide a reference or evidence, that would be very useful. But everything thus far on this topic has been unsubstantiated opinion... – XML May 24 '17 at 09:38
  • 1
    @XML I can't link to a document but I was watching front end masters. https://frontendmasters.com/courses/motion-design-css/ Copy from the site: The easiest way to transition multiple properties is to use “all” as the property to be transitioned. This can have unintended side effects since every property change will be transitioned and each transition will have the same duration. Instead, Rachel demonstrates how to use the transition property to create a comma-delimitated list of transitions - each with their own duration and delay. – Stefan Burt Jun 02 '17 at 09:15
  • 3
    @XML The way it was explained there are two negative effects. 1, The browser adds extra resources due to the use of 'all'. The browser will listen closely to that element waiting for any changes which are less performant and can create page jank. 2, Can create unexpected effects if a developer later puts in a background color which will then be transitioned which might not be expected or required. – Stefan Burt Jun 02 '17 at 09:17
  • 2
    Using "all" under transition definitions is ok of course, but that is relevant only if the definitions of ALL the transitions for the current element are the same, for duration (".5s", "1s" and so on) and the timing function ("ease-in-out" and so on). Otherwise, one must separate the definitions by each type fully defined (and comma-separated, of course). – TheCuBeMan Aug 15 '18 at 07:34
  • 1
    Just re-reading this, and I don't buy the performance hypo: all CSS properties have defaults, including transition properties. All a rule like this does is: change those properties. But it doesn't actually _create a transition_, which is what would actually impair performance. On the question of maintainability... I do agree: it's probably better to be more surgical. But... you should know what's _possible_. – XML Mar 10 '22 at 18:37
33

If you make all the properties animated the same, you can set each separately which will allow you to not repeat the code.

 transition: all 2s;
 transition-property: color, text-shadow;

There is more about it here: CSS transition shorthand with multiple properties?

I would avoid using the property all (transition-property overwrites 'all'), since you could end up with unwanted behavior and unexpected performance hits.

mxdanger
  • 21
  • 5
Corey Young
  • 520
  • 4
  • 10
31

Something like the following will allow for multiple transitions simultaneously:

-webkit-transition: color .2s linear, text-shadow .2s linear;
   -moz-transition: color .2s linear, text-shadow .2s linear;
     -o-transition: color .2s linear, text-shadow .2s linear;
        transition: color .2s linear, text-shadow .2s linear;

Example: http://jsbin.com/omogaf/2

Dendromaniac
  • 378
  • 1
  • 14
Delan Azabani
  • 79,602
  • 28
  • 170
  • 210
3
.nav a {
    transition: color .2s, text-shadow .2s;
}
Locoroco
  • 39
  • 1
2

It's possible to make the multiple transitions set with different values for duration, delay and timing function. To split different transitions use ,

button{
  transition: background 1s ease-in-out 2s, width 2s linear;
  -webkit-transition: background 1s ease-in-out 2s, width 2s linear; /* Safari */
}

Reference: https://kolosek.com/css-transition/

Nesha Zoric
  • 6,218
  • 42
  • 34
0

Here's a LESS mixin for transitioning two properties at once:

.transition-two(@transition1, @transition1-duration, @transition2, @transition2-duration) {
 -webkit-transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
    -moz-transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
      -o-transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
          transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
}
Mark P
  • 407
  • 4
  • 4
-1

In Sass you can achieve using below code

@mixin transition($transitions...) {
  $unfoldedTransitions: ();
  @each $transition in $transitions {
    $unfoldedTransitions: append($unfoldedTransitions, unfoldTransition($transition), comma);
  }
  
  -webkit-transition: $unfoldedTransitions;
  transition: $unfoldedTransitions;
}

@function unfoldTransition ($transition) {
  // Default values
  $property: all;
  $duration: .2s;
  $easing: null; // Browser default is ease, which is what we want
  $delay: null; // Browser default is 0, which is what we want
  $defaultProperties: ($property, $duration, $easing, $delay);

  // Grab transition properties if they exist
  $unfoldedTransition: ();
  @for $i from 1 through length($defaultProperties) {
    $p: null;
    @if $i <= length($transition) {
      $p: nth($transition, $i)
    } @else {
      $p: nth($defaultProperties, $i)
    }
    $unfoldedTransition: append($unfoldedTransition, $p);
  }

  @return $unfoldedTransition;
}

// Usage:   @include transition(width, height 0.3s ease-in-out);

All credit goes to tobiasahlin https://gist.github.com/tobiasahlin

Sourav Singh
  • 878
  • 1
  • 8
  • 14