Verzögerung der CSS-Animation beim Wiederholen

Ich habe kürzlich herausgefunden, wie man CSS-Animationen "richtig" verwendet (zuvor habe ich sie als nicht in der Lage abgetan, komplexe Sequenzen wie in JavaScript zu erstellen). Jetzt lerne ich etwas über sie.

Für diesen Effekt versuche ich, einen Gradienten "Flare" über ein Fortschrittsbalken-ähnliches Element streichen zu lassen. Ähnlich wie bei nativen Windows Vista / 7-Fortschrittsbalken.

@keyframes barshine {
  from {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);}
  to {background-image:linear-gradient(120deg,rgba(255,255,255,0) 100%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%);}
}
.progbar {
  animation: barshine 1s 4s linear infinite;
}

Wie Sie sehen können, versuche ich, eine Verzögerung von 4 Sekunden zu erreichen, gefolgt von einem wiederholten Glanz in 1 Sekunde.

Es scheint jedoch, dass dies animation-delaynur für die erste Iteration gilt, nach der der Glanz immer wieder wiederholt wird.

Ich habe dieses Problem wie folgt "gelöst":

@keyframes expbarshine {
  from {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);}
  80% {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);}
  to {background-image:linear-gradient(120deg,rgba(255,255,255,0) 100%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%);}
}
.progbar {
  animation: barshine 5s linear infinite;
}

fromund 80%sind genau gleich, was zu einer "Verzögerung" von 80% der Animationslänge führt.

Dies funktioniert, aber für meine nächste Animation muss die Verzögerung variabel sein (konstant für ein bestimmtes Element, aber variabel unter den Elementen, die die Animation verwenden), während die Animation selbst genau gleich lang bleibt.

Mit der obigen "Lösung" würde ich eine langsamere Animation erhalten, wenn ich nur eine längere Verzögerung möchte.

Ist es möglich, dass die animation-delayAnwendung auf alle Iterationen und nicht nur auf die erste angewendet wird?

Ich hatte ein ähnliches Problem und benutzte

@-webkit-keyframes pan {
   0%, 10%       { -webkit-transform: translate3d( 0%, 0px, 0px); }
   90%, 100%     { -webkit-transform: translate3d(-50%, 0px, 0px); }
}

Etwas irritierend, dass Sie Ihre Dauer vortäuschen müssen, um Verzögerungen an beiden Enden zu berücksichtigen.

minitech ist richtig, da es animation-delaydie Verzögerung vor dem Start der Animation und NICHT die Verzögerung zwischen den Iterationen angibt . Der Redaktionsentwurf der Spezifikation beschreibt sie gut und es gab eine Diskussion über diese Funktion, die Sie hier beschreiben , was auf diese Iterationsverzögerungsfunktion hindeutet.

Während es in JS möglicherweise eine Problemumgehung gibt, können Sie diese Iterationsverzögerung für das Fortschrittsbalken-Flare nur mit CSS vortäuschen.

Indem Sie das Flare-Div position:absoluteund das übergeordnete Div deklarieren, den overflow: hiddenKeyframe-Status von 100% größer als die Breite des Fortschrittsbalkens festlegen und mit der Timing-Funktion für kubische Bezier und den Werten für den linken Versatz herumspielen , können Sie ein ease-in-outoder linearTiming mit emulieren eine Verzögerung".

Es wäre interessant, ein less / scss-Mixin zu schreiben, um genau den linken Offset und die Timing-Funktion zu berechnen, um genau das zu erhalten, aber ich habe im Moment nicht die Zeit, damit herumzuspielen. Würde aber gerne so etwas sehen!

Hier ist eine Demo, die ich zusammengestellt habe, um dies zu demonstrieren. (Ich habe versucht, den Windows 7-Fortschrittsbalken zu emulieren und bin etwas zu kurz gekommen, aber es zeigt, wovon ich spreche.)

Demo: http://codepen.io/timothyasp/full/HlzGu

<!-- HTML -->
<div class="bar">
   <div class="progress">
      <div class="flare"></div>
   </div>
</div>


/* CSS */

@keyframes progress {
  from {
    width: 0px;
  }
  to {
    width: 600px;
  }
}

@keyframes barshine {
  0% {
    left: -100px;
  }

  100% {
    left: 1000px;
  }
}
.flare {
  animation-name: barshine;
  animation-duration: 3s;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.14, .75, .2, 1.01);
  animation-iteration-count: infinite;
  left: 0;
  top: 0;
  height: 40px;
  width: 100px;
  position: absolute;
  background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.69) 0%, rgba(255,255,255,0) 87%); /* FF3.6+ */
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.69)), color-stop(87%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.69) 0%,rgba(255,255,255,0) 87%); /* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.69) 0%,rgba(255,255,255,0) 87%); /* Opera 12+ */
  background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.69) 0%,rgba(255,255,255,0) 87%); /* IE10+ */
  background: radial-gradient(ellipse at center,  rgba(255,255,255,0.69) 0%,rgba(255,255,255,0) 87%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b0ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  z-index: 10;
}
.progress {
  animation-name: progress;
  animation-duration: 10s;
  animation-delay: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  overflow: hidden;
  position:relative;
  z-index: 1;
  height: 100%;
  width: 100%;
  border-right: 1px solid #0f9116;
  background: #caf7ce; /* Old browsers */
  background: -moz-linear-gradient(top, #caf7ce 0%, #caf7ce 18%, #3fe81e 45%, #2ab22a 96%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#caf7ce), color-stop(18%,#caf7ce), color-stop(45%,#3fe81e), color-stop(96%,#2ab22a)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #caf7ce 0%,#caf7ce 18%,#3fe81e 45%,#2ab22a 96%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #caf7ce 0%,#caf7ce 18%,#3fe81e 45%,#2ab22a 96%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #caf7ce 0%,#caf7ce 18%,#3fe81e 45%,#2ab22a 96%); /* IE10+ */
  background: linear-gradient(to bottom, #caf7ce 0%,#caf7ce 18%,#3fe81e 45%,#2ab22a 96%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#caf7ce', endColorstr='#2ab22a',GradientType=0 ); /* IE6-9 */
}

.progress:after {
  content: "";
  width: 100%;
  height: 29px;
  right: 0;
  bottom: 0;
  position: absolute;
  z-index: 3;
  background: -moz-linear-gradient(left, rgba(202,247,206,0) 0%, rgba(42,178,42,1) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(202,247,206,0)), color-stop(100%,rgba(42,178,42,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left, rgba(202,247,206,0) 0%,rgba(42,178,42,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left, rgba(202,247,206,0) 0%,rgba(42,178,42,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(left, rgba(202,247,206,0) 0%,rgba(42,178,42,1) 100%); /* IE10+ */
  background: linear-gradient(to right, rgba(202,247,206,0) 0%,rgba(42,178,42,1) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00caf7ce', endColorstr='#2ab22a',GradientType=1 ); /* IE6-9 */
}

.bar {
  margin-top: 30px;
  height: 40px;
  width: 600px;
  position: relative;
  border: 1px solid #777;
  border-radius: 3px;
}

Das sollten Sie tun. Es sollte funktionieren, dass Sie eine 1-Sekunden-Animation und dann eine Verzögerung von 4 Sekunden zwischen den Iterationen haben:

@keyframes barshine {
  0% {
  background-image:linear-gradient(120deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);
  }
  20% {
    background-image:linear-gradient(120deg,rgba(255,255,255,0) 10%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%);
  }
}
.progbar {
  animation: barshine 5s 0s linear infinite;
}

Also habe ich viel damit rumgespielt und du kannst es tun, ohne sehr hackig zu sein. Dies ist der einfachste Weg, um eine Verzögerung zwischen Animationsiterationen einzufügen, die 1. SUPER EASY und 2. nur ein wenig Logik erfordert. Schauen Sie sich diese Tanzanimation an, die ich gemacht habe:

.dance{
  animation-name: dance;
  -webkit-animation-name: dance;

  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-duration: 2.5s;
  -webkit-animation-duration: 2.5s;

  -webkit-animation-delay: 2.5s;
  animation-delay: 2.5s;
  animation-timing-function: ease-in;
  -webkit-animation-timing-function: ease-in;

}
@keyframes dance {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(-120deg);
    -moz-transform: rotate(-120deg);
    -o-transform: rotate(-120deg);
    -ms-transform: rotate(-120deg);
    transform: rotate(-120deg);
  }
  50% {
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    transform: rotate(20deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@-webkit-keyframes dance {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  20% {
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    transform: rotate(20deg);
  }
  40% {
    -webkit-transform: rotate(-120deg);
    -moz-transform: rotate(-120deg);
    -o-transform: rotate(-120deg);
    -ms-transform: rotate(-120deg);
    transform: rotate(-120deg);
  }
  60% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  80% {
    -webkit-transform: rotate(-120deg);
    -moz-transform: rotate(-120deg);
    -o-transform: rotate(-120deg);
    -ms-transform: rotate(-120deg);
    transform: rotate(-120deg);
  }
  95% {
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    transform: rotate(20deg);
  }
}

Ich bin tatsächlich hierher gekommen, um herauszufinden, wie man die Animation verzögert, als mir klar wurde, dass Sie nur 1. die Dauer der Animation verlängern und den Zeitanteil für jede Animation bestimmen. Vorher hatte ich sie jeweils 0,5 Sekunden lang für die Gesamtdauer von 2,5 Sekunden. Nehmen wir nun an, ich wollte eine Verzögerung hinzufügen, die der Gesamtdauer entspricht, also eine Verzögerung von 2,5 Sekunden.

Ihre Animationszeit beträgt 2,5 Sekunden und die Verzögerung 2,5 Sekunden, sodass Sie die Dauer auf 5 Sekunden ändern. Da Sie jedoch die Gesamtdauer verdoppelt haben, möchten Sie den Animationsanteil halbieren. Überprüfen Sie das Finale unten. Das hat bei mir perfekt funktioniert.

@-webkit-keyframes dance {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  10% {
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    transform: rotate(20deg);
  }
  20% {
    -webkit-transform: rotate(-120deg);
    -moz-transform: rotate(-120deg);
    -o-transform: rotate(-120deg);
    -ms-transform: rotate(-120deg);
    transform: rotate(-120deg);
  }
  30% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  40% {
    -webkit-transform: rotate(-120deg);
    -moz-transform: rotate(-120deg);
    -o-transform: rotate(-120deg);
    -ms-transform: rotate(-120deg);
    transform: rotate(-120deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

In Summe:

Dies sind die Berechnungen, mit denen Sie wahrscheinlich herausfinden würden, wie Sie die Dauer Ihrer Animation und den Prozentsatz jedes Teils ändern können.

gewünschte_Dauer = x

gewünschte_Dauer = Animation_Teil_Dauer1 + Animation_Teil_Dauer2 + ... (und so weiter)

gewünschte Verzögerung = y

Gesamtdauer = x + y

animation_part_duration1_actual = animation_part_duration1 * gewünschte_duration / total_duration

Ich würde lieber ein wenig JavaScript schreiben, als das CSS weniger verwaltbar zu machen.

Wenden Sie die CSS-Animation zunächst nur auf eine Änderung der Datenattribute an:

.progbar[data-animation="barshine"] {
    animation: barshine 1s linear;
}

Fügen Sie dann Javascript hinzu, um die Animation auf die Hälfte des Verzögerungsbetrags umzuschalten.

var progbar = document.querySelector('.progbar');
var on = false;

setInterval(function () {
    progbar.setAttribute('data-animation', (on) ? 'barshine' : '');
    on = !on;
}, 3000);

Oder wenn Sie nicht möchten, dass die Animation ausgeführt wird, wenn die Registerkarte ausgeblendet ist:

var progbar = document.querySelector('.progbar');
var on = false;

var update = function () {
    progbar.setAttribute('data-animation', (on) ? 'barshine' : '');
    on = !on;
    setTimer();
};

var setTimer = function () {
    setTimeout(function () {
        requestAnimationFrame(update);
    }, 3000);
};

setTimer();

Ich habe ein Poster an der Wand gemacht, das sich in Abständen nach links und rechts bewegt. Bei mir funktioniert es:

.div-animation {
   -webkit-animation: bounce 2000ms ease-out;
    -moz-animation: bounce 2000ms ease-out;
    -o-animation: bounce 2000ms ease-out;
    animation: bounce 2000ms ease-out infinite;
    -webkit-animation-delay: 2s; /* Chrome, Safari, Opera */
    animation-delay: 2s;
    transform-origin: 55% 10%;    
}

@-webkit-keyframes bounce {
    0% {
        transform: rotate(0deg);
    }
    3% {
        transform: rotate(1deg);
    }
    6% {
        transform: rotate(2deg);
    }
    9% {
        transform: rotate(3deg);
    }
    12% {
        transform: rotate(2deg);
    }
    15% {
        transform: rotate(1deg);
    }
    18% {
        transform: rotate(0deg);
    }
    21% {
        transform: rotate(-1deg);
    }
    24% {
        transform: rotate(-2deg);
    }
    27% {
        transform: rotate(-3deg);
    }
    30% {
        transform: rotate(-2deg);
    }
    33% {
        transform: rotate(-1deg);
    }
    36% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

Hier ist ein kleiner Ausschnitt, der 75% der Zeit dasselbe zeigt, dann gleitet er. Dieses Wiederholungsschema emuliert die Verzögerung gut:

@-webkit-keyframes slide    {
0%   {background-position: 0 0;}
25%  {background-position: 0 0;}
50%  {background-position: 0 0;}
75%  {background-position: 0 0;}
100% {background-position: 13em 0;}
}

@-moz-keyframes slide       {
0%   {background-position: 0 0;}
25%  {background-position: 0 0;}
50%  {background-position: 0 0;}
75%  {background-position: 0 0;}
100% {background-position: 13em 0;}
}

@keyframes slide            {
0%   {background-position: 0 0;}
25%  {background-position: 0 0;}
50%  {background-position: 0 0;}
75%  {background-position: 0 0;}
100% {background-position: 13em 0;}
}

Eine andere Möglichkeit, eine Pause zwischen Animationen zu erzielen, besteht darin, eine zweite Animation anzuwenden, die das Element für die gewünschte Verzögerung verbirgt. Dies hat den Vorteil, dass Sie eine CSS-Beschleunigungsfunktion wie gewohnt verwenden können.

.star {
  animation: shooting-star 1000ms ease-in-out infinite,
    delay-animation 2000ms linear infinite;
}

@keyframes shooting-star {
  0% {
    transform: translate(0, 0) rotate(45deg);
  }

  100% {
    transform: translate(300px, 300px) rotate(45deg);
  }
}

@keyframes delay-animation {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  50.01% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

Dies funktioniert nur, wenn die Verzögerung ein Vielfaches der Animationsdauer betragen soll. Ich habe dies verwendet, um eine Dusche mit Sternschnuppen zufälliger erscheinen zu lassen: https://codepen.io/ericdjohnson/pen/GRpOgVO

Eine Verzögerung ist zu Beginn nur einmal mit unendlich möglich. in sort Verzögerung funktioniert nicht mit Endlosschleife. Dafür müssen Sie Keyframes-Animations-Leerzeichen behalten. Beispiel:

@-webkit-keyframes barshine {
  10% {background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8));
    }
  60% {background: -webkit-linear-gradient(top, #7db9e8 0%,#d32a2d 100%);}
}

Es animiert 10% bis 60% und wartet, bis 40% mehr abgeschlossen sind. 40% kommen also zu spät.

Geigenbeispiel finden

Ich weiß, dass dies alt ist, aber ich habe nach der Antwort in diesem Beitrag gesucht und mit jquery können Sie es einfach und ohne allzu großen Aufwand tun. Deklarieren Sie einfach Ihren Animations-Keyframe im CSS und legen Sie die Klasse mit den gewünschten Attributen fest. In meinem Fall habe ich die Tada-Animation von CSS Animate verwendet:

.tada {
    -webkit-animation-name: tada;
    animation-name: tada;
    -webkit-animation-duration: 1.25s;
    animation-duration: 1.25s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

Ich wollte, dass die Animation alle 10 Sekunden ausgeführt wird, damit jquery nur die Klasse hinzufügt. Nach 6000 ms (genug Zeit für den Abschluss der Animation) wird die Klasse entfernt und 4 Sekunden später wird die Klasse erneut hinzugefügt, sodass die Animation erneut gestartet wird.

$(document).ready(function() {
  setInterval(function() {

    $(".bottom h2").addClass("tada");//adds the class

    setTimeout(function() {//waits 6 seconds to remove the class
      $(".bottom h2").removeClass("tada");
    }, 6000);

  }, 10000)//repeats the process every 10 seconds
});

Gar nicht so schwer wie ein Typ.

Sie können eine "falsche" Verzögerung zwischen unendlichen Animationen nur mit CSS erstellen. Der Weg, dies zu tun, besteht darin, Ihre Keyframe-Animationspunkte und Ihre Animationsdauer schnell zu definieren.

Wenn wir zum Beispiel einen springenden Ball animieren wollten und zwischen jedem Sprung eine Verzögerung von gut 0,5 bis 1 Sekunden wollten, können wir Folgendes tun:

@keyframes bounce{
    0%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(25%);
    }
    75%{
        transform: translateY(15%);
    }
    90%{
        transform: translateY(0%);
    }
    100%{
        transform: translateY(0);
    }
}

Wir stellen sicher, dass der Ball viel früher als 100% in seine ursprüngliche Position zurückkehrt. In meinem Beispiel mache ich es zu 90%, was mir eine Verzögerung von ungefähr 0,1 Sekunden verschaffte, was für mich gut genug war. Für Ihren Fall können Sie natürlich entweder weitere wichtige Rahmenpunkte hinzufügen und die Transformationswerte ändern.

Darüber hinaus können Sie eine zusätzliche Animationsdauer hinzufügen, um Ihre Keyframe-Animationen auszugleichen.

Zum Beispiel:

 animation: bounce .5s ease-in-out infinite;

Nehmen wir an, wir wollten, dass die vollständige Animation in 0,5 Sekunden endet, aber wir wollten eine zusätzliche Verzögerung von 0,2 Sekunden zwischen den Animationen.

 animation: bounce .7s ease-in-out infinite;

Daher fügen wir eine zusätzliche Verzögerung von 0,2 Sekunden hinzu, und in unseren Keyframe-Animationen können wir weitere Prozentpunkte hinzufügen, um die Lücken der Verzögerung von 0,2 Sekunden zu füllen.

für einen Randblitz: eigentlich sehr einfach: Ersetzen Sie von bis zu 99% Schwarz und z. B. 1% die Verschiebung zu Blau. Sie können es sogar kürzer machen, die Animationszeit ist auf z. B. 5 Sekunden eingestellt.

@keyframes myborder {
  0% {border-color: black;}
  99% {border-color:black;}
  100% {border-color: blue;}
 }