comment faire une animation en boucle d'attente à l'aide de css3


J'ai un css3 animation avec les éléments suivants:

@-webkit-keyframes rotate {
    from {
    -webkit-transform: rotate(0deg);
    }
    to { 
    -webkit-transform: rotate(360deg);
    }
}

.animated {
-webkit-animation-name: rotate;
-webkit-animation-duration: 2.4s;
-webkit-animation-iteration-count: infinite;
-webkit-transition-timing-function: ease-in-out;
}

Il fonctionne parfaitement, bien..., je veux le faire attendre entre les boucles:

de l'animation de démarrage, l'animation, la finition, attendre(environ 0,5 s), animation de démarrage, animation de fin, attendre(environ 0,5 s)...

PS: j'ai essayé -webkit-animation-delay, il ne fonctionne pas.

Toute aide?

OriginalL'auteur Cihad Turhan | 2012-09-07

  1. 24

    Ajouter 0,5 secondes de votre animation durée, puis de créer une trame supplémentaire dans votre keyframes qui ne change pas le montant de rotation;

    @-webkit-keyframes rotate {
    0% {
    -webkit-transform: rotate(0deg);
    }
    83% { /*2.4 /2.9 = 0.827*/
    -webkit-transform: rotate(360deg);
    }
    100% {
    -webkit-transform: rotate(360deg);
    }
}
.animated {
...
-webkit-animation-duration: 2.9s; /*note the increase*/
...
}

    Petite démo: petit lien.

    Un peu de "contournement" de ce Abody97 fait: webkit animation violon
    Belle solution, pourquoi n'est-ce pas apparaître immédiatement dans ma tête?

    OriginalL'auteur Chris

  2. 0

    Vous pouvez utiliser une transition.
    Par exemple:

    transition: all 0.6s ease-in-out;

    où transition-delay:0.6s;

    OriginalL'auteur Bimba

  3. 0

    La désactivation de la classe css sur l'élément pour une période de temps spécifiée par javascript pourrait résoudre votre problème.

    function delayAnimation () {
    var animatedEl = document.getElementById('whatever');
    animatedEl.className = '';
    setTimeout(function () {
        animatedEl.className = 'animated'
        setTimeout(delayAnimation, 2400);//i see 2.4s is your animation duration
    }, 500)//wait 0.5s
}

    Espère que cette aide.

    Edit : j'ai mis à jour cette réponse à corriger le code. Vous pouvez voir un travail entièrement exemple sur jsfiddle. Grâce à @Fabrice pour souligner le code ne fonctionnait pas.

    merci s'accoupler, la bonne solution mais j'ai besoin de le faire avec css3.
    vous êtes les bienvenus. personnellement, j'ai aimé @Abody97 's réponse mieux aussi quand je l'ai vu 🙂

    OriginalL'auteur frkn