Zwei verschiedene simultane Animationen in einer Schleife mit CSS ausführen?

Question

Ich verwende Bilder, die über das Bild schweben und dann ausgeblendet werden. (Einige tun das Gegenteil, verblassen.) Es funktioniert das erste Mal durch die Schleife, aber wenn es durch das zweite Mal kommt, schneidet das Verblassen einfach aus.

.candycane { 
 
    width: 128px; 
 
    height: 128px; 
 
    position: absolute; 
 
    background: transparent url(https://i.stack.imgur.com/qM90U.png) 0 0 no-repeat; 
 
} 
 

 
.candycane_drift { 
 
    top: 55px; 
 
    z-index: 100; 
 
    animation: drift 15s linear infinite, 3s fadeOut 12s ease-in; 
 
} 
 

 
@keyframes drift { 
 
    from { 
 
    transform: translateX(-175px); 
 
    } 
 
    to { 
 
    transform: translateX(400px); 
 
    } 
 
} 
 

 
@keyframes fadeOut { 
 
    from { 
 
    opacity: 1; 
 
    } 
 
    to { 
 
    opacity: 0; 
 
    } 
 
}

<div class="candycane candycane_drift"></div>

Answer 1

Sie sich anschauen sollten die Animationen kombiniert und Einstellung Keyframe Prozentsätze wie folgt aus:

.candycane { 
 
    width: 128px; 
 
    height: 128px; 
 
    position: absolute; 
 
    background: transparent url(https://i.stack.imgur.com/qM90U.png) 0 0 no-repeat; 
 
} 
 

 
.candycane_drift { 
 
    top: 55px; 
 
    z-index: 100; 
 
    animation: drift 15s linear infinite; 
 
} 
 

 
@keyframes drift { 
 
    0% { 
 
    transform: translateX(-128px); 
 
    opacity: 1; 
 
    } 
 
    66% { 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    transform: translateX(400px); 
 
    } 
 
} 
 

 

<div class="candycane candycane_drift"></div>

Dies hat den Nachteil, beide Animationen zu einer Lockerung der Bindung Einstellung, aber es könnte einfacher sein zu unterziehen Stand und eine gute Lösung in einigen Fällen.

Answer 2

Ich würde die Animation Kurzschrift-Eigenschaft, die Sie verwenden, recherchieren. Die Grundwerte sind wie folgt:/* @keyframes duration | Zeitfunktion | Verzögerung | Iterationszählung | Richtung | Füllmodus | Spielzustand | name */

Der Start der Verzögerung gilt für die erste Iteration aller Animationen, also habe ich eine verwendet, um den Effekt der späten Ausblendung anzuwenden, nach dem Sie suchen. Es gibt jedoch auch andere Möglichkeiten zum Strukturieren Ihrer Animation. Sie können beispielsweise einen mehrstufigen Keyframe verwenden, der Ihre Animation zum Ausblenden am 80% -Keyframe-Fortschrittspunkt startet. Eine mehrstufiges Animation hat dieses Format:

@keyframes late-fade { 
    0% { 
    opacity: 1; 
    } 
    /* Adding a step in the middle */ 
    80% { 
    opacity: 1; 
    } 
    100% { 
    opacity: 0; 
    } 
} 

Dies ist nur eine Lösung für diesen Effekt bekommen, unter der Lösung einen kubisch-Bezier mit, anstatt die Einfachheit in Timing-Funktion.

.candycane { 
 
    width: 128px; 
 
    height: 128px; 
 
    position: absolute; 
 
    background: transparent url(https://i.stack.imgur.com/qM90U.png) 0 0 no-repeat; 
 
} 
 

 
.candycane_drift { 
 
    top: 55px; 
 
    z-index: 100; 
 
/* @keyframes duration | timing-function | delay | 
 
iteration-count | direction | fill-mode | play-state | name */ 
 
    animation: drift 15s linear infinite, fadeOut 15s cubic-bezier(.75,0,1,0) infinite; 
 
} 
 

 
@keyframes drift { 
 
    from { 
 
    transform: translateX(-175px); 
 
    } 
 
    to { 
 
    transform: translateX(400px); 
 
    } 
 
} 
 

 
@keyframes fadeOut { 
 
    from { 
 
    opacity: 1; 
 
    } 
 
    to { 
 
    opacity: 0; 
 
    } 
 
}

<div class="candycane candycane_drift"></div>