Pause zwischen den keyframe-Animationen

habe eine einfache animation mit keyframes.

    @-webkit-keyframes rotation {
    0%   { -webkit-transform: rotate(10deg); }
    25%  { -webkit-transform: rotate(5deg); }
    50%  { -webkit-transform: rotate(10deg); }
    75%   { -webkit-transform: rotate(5deg); }
    100% { -webkit-transform: rotate(10deg); }

}

und

.class { -webkit-animation: rotation 1s infinite; }

Ist es möglich, fügen Sie eine pause zwischen diesen keyframe-animation? Wie 5 Sekunden?
Ich weiß, es ist ein -webkit-animation-delay aber das verzögert nur den start der animation.

P. S. ich weiß, es ist nur der webkit-Präfix... am Ende bekomme ich es durch prefixr.

  • Schauen Sie sich dieses tutorial es hat demos und geht über jede Art von Stil und Klasse leemunroe.com/css3-animations
  • warum nicht einfach entfernen .Klasse ? (wenn die Klasse nur die animation)
  • Ich dachte an die gleiche Lösung, wie Sie Ihren Bearbeiten. Warum gehst du nicht zu bieten, die als Ihre eigene Antwort, und markieren Sie ihn akzeptiert?
  • Vielen Dank für die Erwähnung animation-delay.
InformationsquelleAutor Denny Mueller | 2012-07-27
  1. 11

    Nach kämpfen mit diesem problem selber und mit Hilfe von Denny Müller habe ich gefunden, dass der Schlüssel ist, zu stoppen, bevor 100%.

    Können Sie die Verzögerung zu starten, mit einer Verzögerung und nach der ersten iteration, die Verzögerung wird die Zeit, die bleibt, nachdem die animation beendet ist.

    Hier ist, was ich für meine Umsetzung:

    @-webkit-keyframes spincube {
    from,to      {                                                    }
    8%,14%       { -webkit-transform: rotateY(-90deg);                }
    24%,30%      { -webkit-transform: rotateY(-90deg) rotateZ(90deg); }
    40%,46%      { -webkit-transform: rotateY(180deg) rotateZ(90deg); }
    56%,62%      { -webkit-transform: rotateY(90deg) rotateX(90deg);  }
    72%,78%      { -webkit-transform: rotateX(90deg);                 }
    88%,94%      { -webkit-transform: rotateX(0deg);                  }
}

    Wie Sie sehen können, höre ich bei 94% und die verbleibenden 6% wird verwendet, um die pause auf dem ersten Bild.

    • Wirklich hilfreich, und schön, Logik +1
    InformationsquelleAutor Michiel Pater
  2. 7

    Bekam ein workaround, aber sieht bisschen schmutzig

    @-webkit-keyframes rotation {
        0%   { -webkit-transform: rotate(10deg); }
        5%  { -webkit-transform: rotate(5deg); }
        10%  { -webkit-transform: rotate(10deg); }
        15%   { -webkit-transform: rotate(5deg); }
        20% { -webkit-transform: rotate(10deg); }
        100% { -webkit-transform: rotate(10deg); }

    }
.class { -webkit-animation: rotation 5s infinite; }
    • vielen Dank... hat mir sehr geholfen 🙂
    • Wirklich hilfreich, und schön, Logik +1
    InformationsquelleAutor Denny Mueller
Schreibe einen Kommentar