Jak mieć wiele przejść CSS na elemencie?

To dość proste pytanie, ale nie mogę znaleźć bardzo dobrej dokumentacji na temat właściwości przejścia CSS. Oto fragment CSS: 

    .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);
}

Jak widać, właściwości przejścia nadpisują się nawzajem. W obecnym stanie tekst-cień będzie animowany, ale nie kolor. Jak sprawić, by obie animacje były jednocześnie animowane? Dzięki za odpowiedzi.

Author: Andreas Köberle, 2011-08-13
Source

7 answers

Właściwości przejścia są rozdzielane przecinkami we wszystkich przeglądarkach obsługujących przejścia: 

.nav a {
  transition: color .2s, text-shadow .2s;
}

ease jest domyślną funkcją pomiaru czasu, więc nie musisz jej określać. Jeśli naprawdę chcesz linear, musisz go określić: 

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

Zaczyna się to powtarzać, więc jeśli masz zamiar używać tych samych funkcji czasu i czasu w wielu właściwościach, najlepiej jest użyć różnych właściwości transition-* zamiast skrótu: 

transition-property: color, text-shadow;
transition-duration: .2s;
transition-timing-function: linear;
 439
Author: coreyward,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-26 22:15:43

Można również po prostu znacznie z: 

.nav a {
    -webkit-transition: all .2s;
}
 34
Author: XML,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-06-15 22:17:48

Coś takiego jak poniżej pozwoli na wielokrotne przejścia jednocześnie: 

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

Przykład: http://jsbin.com/omogaf/2

 28
Author: Delan Azabani,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-14 17:43:24

Jeśli wszystkie animowane właściwości będą takie same, możesz ustawić każdą z nich osobno, co pozwoli Ci nie powtarzać kodu.

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

Jest o tym więcej tutaj: Skrót przejścia CSS z wieloma właściwościami?

Unikałbym używania właściwości all( transition-property nadpisuje 'all'), ponieważ możesz skończyć z niechcianym zachowaniem i nieoczekiwanymi efektami.

 21
Author: Corey Young,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-06-08 02:22:56 
.nav a {
    transition: color .2s, text-shadow .2s;
}
 2
Author: Locoroco,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-07-25 04:43:04

Oto mniej mixin dla przejścia dwóch właściwości na raz: 

.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;
}
 1
Author: user1445230,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-06-26 15:30:02

Możliwe jest ustawienie wielu przejść z różnymi wartościami dla czasu trwania, opóźnienia i funkcji czasu. Aby podzielić różne przejścia użyj , 

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

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

 1
Author: Nesha Zoric,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-17 13:56:20