Comment créer dynamiquement '@-image-clé' les animations CSS?

eh bien, je ne pense pas que c'est facile de créer des dynamiques @keyframes elles sont rigides car elles doivent être codées en dur.

Les Transitions sont un peu plus facile de travailler avec, car ils peuvent normalement répondre à toutes les CSS modifications apportées par JavaScript.

Cependant, la complexité que les transitions CSS peut vous donner est assez limité — une animation avec plusieurs étapes est difficile à réaliser.

C'est un problème de CSS @les animations d'images clés sont destinés à résoudre, mais ils n'offrent pas le niveau de la dynamique de la réactivité que les transitions ne.

mais ces liens peuvent vous aider à

Link1 : un outil qui génère un @-webkit-animation avec des images clés avec beaucoup de petites étapes. Cela ouvre la porte à un choix illimité de l'assouplissement de la formule.

Link2 il sera d'une grande aide pour vous de prendre comme base, car il fournit une INTERFACE utilisateur pour créer des animations et des exportations pour le code CSS.

Je suppose que cette solution sera certainement travailler pour vous. Son est utilisé pour la dynamique des images clés

Alex Grande réponse fonctionne très bien pour quelques images clés. Mais, disons que vous avez de vouloir continuer à ajouter dans les images clés, encore et encore, alors votre page web vraiment de lag vraiment rapide. Pour résoudre ce problème, il suffit d'ARRÊTER de créer de nouveaux éléments du DOM. Plutôt, créer 1 nouveau DOM feuille de style, et de la réutiliser avec les inertRule. Si vous voulez encore plus d'images clés (comme si vous êtes à la génération d'une nouvelle image clé toutes les animationframe), alors vous avez besoin de mettre en place un système qui supprime les anciennes images clés après qu'ils ne sont plus utilisés. C'est un bon début pour comment quelque chose comme cela peut être réalisé.

var myReuseableStylesheet = document.createElement('style'),
    addKeyFrames = null;
document.head.appendChild( myReuseableStylesheet );
if (CSS && CSS.supports && CSS.supports('animation: name')){
    //we can safely assume that the browser supports unprefixed version.
    addKeyFrames = function(name, frames){
        var pos = myReuseableStylesheet.length;
        myReuseableStylesheet.insertRule(
            "@keyframes " + name + "{" + frames + "}", pos);
    }
} else {
    addKeyFrames = function(name, frames){
        //Ugly and terrible, but users with this terrible of a browser
        //*cough* IE *cough* don't deserve a fast site
        var str = name + "{" + frames + "}",
            pos = myReuseableStylesheet.length;
        myReuseableStylesheet.insertRule("@-webkit-keyframes " + str, pos);
        myReuseableStylesheet.insertRule("@keyframes " + str, pos+1);
    }
}

Exemple d'utilisation:

addKeyFrames(
    'fadeAnimation',
    '0%{opacity:0}' + 
    '100%{opacity:1}'
);

Aussi, Alex Grande, je suis assez sûr que document.getElementsByTagName('head')[0] et type = 'text/css' n'a pas été nécessaire étant donné que la IE8, et @keyframes ne sont pas pris en charge jusqu'à IE10. Juste pour dire...

En JavaScript est-il possible d'accéder à la feuille de style avec document.les feuilles de style. Chaque fiche a un règle et/ou cssRule liste (navigateur en fonction) et un CSSStyleSheet.insertRule() méthode.

Cette méthode permet d'ajouter une nouvelle image-clé raw comme une chaîne de caractères:

JavaScript

function insertStyleSheetRule(ruleText)
{
    let sheets = document.styleSheets;

    if(sheets.length == 0)
    {
        let style = document.createElement('style');
        style.appendChild(document.createTextNode(""));
        document.head.appendChild(style);
    }

    let sheet = sheets[sheets.length - 1];
    sheet.insertRule(ruleText, sheet.rules ? sheet.rules.length : sheet.cssRules.length);
}

document.addEventListener("DOMContentLoaded", event =>
{
    insertStyleSheetRule("@keyframes spinIt { 0% { transform: rotate(-20deg); } 100% { transform: rotate(20deg); } }");

    insertStyleSheetRule("#box { " + 
        "animation: spinIt 1s infinite alternate cubic-bezier(0.5,0,0.5,1); " + 
        "width: 64px; height: 64px; background-color: red; border: 4px solid black; " + 
    "}");
});

html

<div id="box"></div>

démo: https://jsfiddle.net/axd7nteu/

Vous pouvez créer un <style> élément, placez son contenu dans le fichier CSS que vous voulez, dans ce cas, la déclaration de votre animation et l'ajouter à la <head> de la page.

Aussi, comme d'autres l'ont suggéré, si vous avez besoin pour créer de nombreuses animations différentes, alors il serait préférable de réutiliser un seul <style> balise plutôt que de créer plusieurs d'entre eux et d'ajouter de nouveaux modèles à l'aide de CSSStyleSheet.insertRule().

Enfin, si vous pouvez utiliser ES6 du modèle de littéraux/chaînes, votre code est beaucoup plus propre:

JS:

let dynamicStyles = null;

function addAnimation(body) {
  if (!dynamicStyles) {
    dynamicStyles = document.createElement('style');
    dynamicStyles.type = 'text/css';
    document.head.appendChild(dynamicStyles);
  }
  
  dynamicStyles.sheet.insertRule(body, dynamicStyles.length);
}

addAnimation(`
  @keyframes myAnimation { 
    0% { transform: rotate(0); }
    20% { transform: rotate(${ 360 * Math.random() }deg); }
    60% { transform: rotate(${ -360 * Math.random() }deg); }
    90% { transform: rotate(${ 360 * Math.random() }deg); }
    100% { transform: rotate(${ 0 }deg); }
  }
`);

document.getElementById("circle").style.animation = 'myAnimation 3s infinite';

CSS:

html,
body {
  height: 100vh;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

#circle {
  width: 100px;
  height: 100px;
  box-shadow:
    0 0 48px -4px rgba(0, 0, 0, .25),
    0 0 0 4px rgba(0, 0, 0, .02);
  border-radius: 100%;
  position: relative;
  overflow: hidden;
}

#circle::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-2px);
  border-left: 4px solid #FFF;
  height: 24px;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, .25);
}

HTML:

<div id="circle"></div>

Ou encore mieux:

JS:

let dynamicStyles = null;

function addAnimation(name, body) {
  if (!dynamicStyles) {
    dynamicStyles = document.createElement('style');
    dynamicStyles.type = 'text/css';
    document.head.appendChild(dynamicStyles);
  }
  
  dynamicStyles.sheet.insertRule(`@keyframes ${ name } {
    ${ body }
  }`, dynamicStyles.length);
}

addAnimation('myAnimation', `
  0% { transform: rotate(0); }
  20% { transform: rotate(${ 360 * Math.random() }deg); }
  60% { transform: rotate(${ -360 * Math.random() }deg); }
  90% { transform: rotate(${ 360 * Math.random() }deg); }
  100% { transform: rotate(${ 0 }deg); }
`);

document.getElementById("circle").style.animation = 'myAnimation 3s infinite';

CSS:

html,
body {
  height: 100vh;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

#circle {
  width: 100px;
  height: 100px;
  box-shadow:
    0 0 48px -4px rgba(0, 0, 0, .25),
    0 0 0 4px rgba(0, 0, 0, .02);
  border-radius: 100%;
  position: relative;
  overflow: hidden;
}

#circle::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-2px);
  border-left: 4px solid #FFF;
  height: 24px;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, .25);
}

HTML:

<div id="circle"></div>

Permettez-moi de partager une mise à jour (2019) réponse à cette question. **Oui, c'est possible sans Javascript ** à l'aide de CSS Variables (pris en charge par tous les navigateurs modernes).

--lightScaleStart: 0.8;

.light {
    animation: grow 2s alternate infinite ease-in-out;
}

.light.yellow {
    --lightScaleEnd: 1.1;
}

.light.red {
    --lightScaleEnd: 1.2;
}

@keyframes grow {
  from {
    transform: scale(var(--lightScaleStart));
  }
  to {
    transform: scale(var(--lightScaleEnd));
  }
}

Voir démo sur Codepen Dynamique les Animations CSS CSS Variables