Jak mieć wiele przejść CSS na elemencie?

327

To dość proste pytanie, ale nie mogę znaleźć bardzo dobrej dokumentacji dotyczącej właściwości przejścia CSS. Oto fragment kodu 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 wzajemnie się nadpisują. W tej chwili cień tekstowy będzie animowany, ale nie kolor. Jak sprawić, by obie były jednocześnie animowane? Dziękuję za wszelkie odpowiedzi.

animation css css-transitions

— Eric Thoma
źródło

Nie zapominaj, że transition: alljest to bardzo buggy na safari / ipad: joelglovier.com/writing/…

— Oğuzhan Kahyaoğlu

583

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

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

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

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

transition-property: color, text-shadow;
transition-duration: .2s;
transition-timing-function: linear;

— coreyward
źródło

11

Zakładam, że transformacja jest łańcuchem, w którym kolejność ma znaczenie, więc składnia jest przyjemna, jeśli jesteś przyzwyczajony do funkcjonalnego tworzenia łańcuchów, podczas gdy przejście wymaga nieuporządkowanej listy całkowicie niezależnych elementów, więc przecinki są odpowiednie

— mirichan

1

Jako ogólny komentarz na temat przejść w CSS, należy pamiętać, że posiadanie wielu definicji przejść jedna po drugiej nie będzie działać, a aby to osiągnąć, muszą one być w tej samej definicji (jak w SA tutaj). Zgodnie z podstawowymi regułami CSS obowiązuje zasada „najnowsza”, więc jeśli w oddzielnych wierszach jest wiele definicji, zastosowana zostanie tylko ostatnia definicja. FYI

— TheCuBeMan

37

Możesz także po prostu znacząco:

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

— XML
źródło

44

Możesz faktycznie usunąć „wszystko”, ponieważ jest to ustawienie domyślne, chyba że określono inaczej.

— joshnh

13

+1 za doskonały punkt, ale myślę, że trzymanie go tam jest szczególnie użyteczne, szczególnie dla spójności i zrozumienia między zespołami.

— XML

4

Uważaj na to! Jeśli programowanie na telefony komórkowe, w połączeniu z elementami przyspieszanymi sprzętowo, sprawia, że nowe urządzenia są błędne, a stare urządzenia są bezużyteczne.

— Ilya Karnaukhov,

2

Dzięki, @ CanerŞahin. Czy możesz podać nam dokumentację lub narzędzia do analizy porównawczej, które pomogą ludziom zrozumieć ten punkt? Czy widzisz również dowody wskazujące, że „wszystko” jest gorsze niż brak jakiegokolwiek specyfikatora?

— XML

3

@XML Jak to wyjaśniono, istnieją dwa negatywne skutki. 1, przeglądarka dodaje dodatkowe zasoby ze względu na użycie „wszystkich”. Przeglądarka będzie uważnie nasłuchiwać tego elementu, czekając na wszelkie zmiany, które są mniej wydajne i mogą tworzyć błędy strony. 2, może tworzyć nieoczekiwane efekty, jeśli programista wprowadzi później kolor tła, który zostanie następnie przeniesiony, co może nie być oczekiwane lub wymagane.

— Stefan Burt

29

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

— Delan Azabani
źródło

24

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

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

Jest więcej na ten temat: Skrót CSS o wielu właściwościach?

Unikałbym używania właściwości all (właściwość przejścia nadpisuje „wszystko”), ponieważ mogłoby to spowodować niepożądane zachowanie i nieoczekiwane pogorszenie wydajności.

— Corey Young
źródło

2

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

— Locoroco
źródło

1

Oto MNIEJ mieszanka do przenoszenia dwóch właściwości jednocześnie:

.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.
źródło

autoprefixer jest jeszcze ładniejszy!

— przepisany

autoprefixer + rysik FTW.

— Jason Lydon

1

Możliwe jest ustawienie wielu przejść z różnymi wartościami czasu trwania, opóźnienia i funkcji czasowej. 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/

— Nesha Zoric
źródło

0

Można również uniknąć całkowitego określenia właściwości.

#box {
  transition: 0.4s;
  position: absolute;
  border: 1px solid darkred;
  bottom: 20px; left: 20px;
  width: 200px; height: 200px;
  opacity: 0;
}

#box.on {
  opacity: 1;
  height: 300px;
  width: 500px;
 }

— jerblack
źródło