Wie kann man mehrere CSS-Übergänge auf einem Element haben?

Question

Es ist eine ziemlich einfache Frage, aber ich kann nicht finden, sehr gute Dokumentation über die CSS-Übergangseigenschaften. Hier ist das 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);
}

Wie Sie sehen können, überschreiben sich die Übergangseigenschaften gegenseitig. So wie es aussieht, wird der Textschatten animiert, aber nicht die Farbe. Wie kann ich beide gleichzeitig animieren? Danke für jede Antwort.

Answer 1

Es ist möglich, mehrere Übergänge mit unterschiedlichen Werten für Dauer, Verzögerung und Timing-Funktion festzulegen. Um verschiedene Übergänge aufzuteilen, verwenden Sie ,

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

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

Answer 2

Hier ist ein LESS-Mixin für den Übergang von zwei Eigenschaften auf einmal:

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

Answer 3

Es ist auch möglich, auf die Angabe der Eigenschaften gänzlich zu verzichten.

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

Answer 4

En Sass können Sie mit folgendem Code erreichen

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

Alle Anerkennung geht an tobiasahlin https://gist.github.com/tobiasahlin