Pause entre les animations d'images clés

ai une simple animation avec des images clés.

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

}

et

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

Est-il possible d'ajouter une pause entre cette animation avec des images clés? Comme les 5 secondes?
Je sais qu'il est un -webkit-animation-delay mais ce retard que le début de l'animation.

P. S. je sais que c'est seulement le webkit préfixe... à la fin je l'obtenir par le biais prefixr.

Découvrez ce tutoriel il a des démos et va au-dessus de chaque style et de classe leemunroe.com/css3-animations
pourquoi ne pas simplement supprimer .de classe ? (si la classe est uniquement l'animation)
Je pensais à la même solution que votre montage. Pourquoi ne pas vous offrir que votre propre réponse et marquez-elle acceptée?
Merci pour la mention de animation-delay.

OriginalL'auteur Denny Mueller | 2012-07-27

  1. 11

    Après aux prises avec ce problème moi-même et avec l'aide de Denny Mueller, j'ai trouvé que la clé est de s'arrêter avant 100%.

    Vous pouvez utiliser le délai de commencer avec un retard et après la première itération, le délai sera le temps qui est à gauche après l'animation est terminée.

    Voici ce que j'ai utilisé pour ma mise en œuvre:

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

    Comme vous pouvez le voir, je m'arrête à 94% et 6% est utilisé pour faire une pause sur la première image.

    Vraiment utile, et agréable logique +1

    OriginalL'auteur Michiel Pater

  2. 7

    A obtenu une solution de contournement, mais semble peu sale

    @-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; }
    merci... m'a beaucoup aidé 🙂
    Vraiment utile, et agréable logique +1

    OriginalL'auteur Denny Mueller