La chaîne les animations CSS avec boucle infinie

Est-il possible de connecter deux animations et ensuite en boucle cette chaîne indéfiniment?
{|--ani1-- | --ani1-- | --ani1-- | --ani2-- | --ani2--|} x loop 

div {
    width: 50px; height: 50px; border: 3px solid black;
    animation: ani1 3s 0s 3, ani2 3s 9s 2;
    /*animation-iteration-count: infinite;*/
}
@keyframes ani1 {
    from { background: green; }
    50% { background: red; }
    to { background: green; }    
}
@keyframes ani2 {
    from { width: 100px; }
    50% { width: 150px; }
    to { width: 100px; }    
}

testé ici: http://jsfiddle.net/kQA6D/

InformationsquelleAutor Qwerty | 2013-12-16
  1. 5

    En bref, pas (certaines solutions sont possibles)

    Ce que votre ligne de animation-count: infinte est en train de faire c'est pour de l'élément: animation: ani1 3s 0s infinite, ani2 3s 9s infinite;. Ainsi, depuis la première animation a déclaré un nombre d'itérations de infinite, le deuxième ne sera jamais atteint

    La plus simple et la plus classique est d'utiliser javascript et animationEnd de le faire (j'utilise Craig Buckler de l' PrefixedEvent fonction mais il n'est pas nécessaire)

    var elem = document.querySelectorAll("div")[0],
    pfx = ["webkit", "moz", "MS", "o", ""];    
function PrefixedEvent(element, type, callback) {
    for (var p = 0; p < pfx.length; p++) {
        if (!pfx[p]) type = type.toLowerCase();
        element.addEventListener(pfx[p]+type, callback, false);
    }
}    
PrefixedEvent(elem, "animationend", function() { switchAnims(elem) });    
function switchAnims(element) {
    if(element.style.animationName = "ani1") {
        element.style.animationName = "ani2";
    } else {
        element.style.animationName = "ani1";
    }
}

    La chaîne les animations CSS avec boucle infinie (webkit uniquement - autres préfixes doivent être ajoutés)

    Autre, pour un pur CSS corrigé à l'instant que vous auriez à les combiner comme une animation. Pour vous qui pourrait ressembler à

    @keyframes aniBoth {
    0%, 16.666%, 33.333%     { background: green; }
    8.333%, 24.999%, 41.666% { background: red; }
    50%                      { background: green; }
    50.001%                  { background:white; width: 100px; }
    75%, 100%                { width: 100px; }
    62.5%, 87.5%             { width: 150px; }
}

    La chaîne les animations CSS avec boucle infinie (webkit uniquement - autres préfixes doivent être ajoutés)

    • Le pur CSS corriger la syntaxe est déroutant au premier coup d'œil, mais beaucoup plus élégant et concis que ma solution. Bravo.
    • Je ne veux qu'il soit pur CSS, mais le problème est que 1) je vais avoir à recalculer les pourcentages, 2) fonctions de temporisation. Je suppose que je suis parti avec javascript.
    InformationsquelleAutor Zach Saucier
  2. 3

    Non, vous aurez besoin de le déclarer tout dans une animation avec les étapes spécifiques que vous voulez, comme suit:

    div {
    width: 50px;
    height: 50px;
    border: 3px solid black;
    animation: ani1 3s 0s infinite;
}
@keyframes ani1 {
    0 { background: green; }
    10% { background: red; }
    20% { background: green; }
    30% { background: red; }
    40% { background: green; }
    50% { background: red; }
    60% { background: green; width: 50px; }
    70% { width: 100px; }
    80% { width: 150px; }
    90% { width: 100px; } 
    100% { width: 150px; }   
}

    Démo (Utilise -webkit- préfixe pour être visible dans google Chrome)

    Alternativement, vous pouvez déclarer vos animations séparément avec construit dans l'écart, de sorte que les deux animations ne se chevauchent pas, comme suit:

    div {
    width: 100px;
    height: 50px;
    border: 3px solid black;
    animation: ani1 12s 0s infinite, ani2 12s 0s infinite;
}
@keyframes ani1 {
    0%, 60%, 100% { background: white; }
    20%, 40% { background: green; }
    10%, 30%, 50% { background: red; }
}

@keyframes ani2 {
    60%, 80%, 100% { width: 100px; }
    70%, 90% { width: 150px; } 
}

    Démo (Utilise -webkit- préfixe pour être visible dans google Chrome)

    • Construire l'écart dans les animations. Dans votre exemple, vous avez tout dans une animation, où la deuxième animation démarre à 50%. Ma méthode de démarrage de la deuxième animation à 60% et le premier film d'animation de finitions, de 60% pour les garder comme des images-clés distinctes, mais les empêcher de se chevaucher.
    • Voici un exemple simplifié à l'aide de la syntaxe plus courte comme le vôtre: jsfiddle.net/shshaw/FLTbk
    • Ah, je vois! Idiot de me rater
    • Le problème quand on fait ça dans une animation (ou avec des lacunes), c'est que 1) je vais avoir à recalculer les pourcentages, 2) fonctions de temporisation.
    • Ouais, malheureusement, je pense que le Javascript est la seule option ici! Zach solution doit être ce dont vous avez besoin 🙂
    InformationsquelleAutor shshaw