如何动态创建“@-Keyframe”CSS 动画？

为了给我们的 HTML 网页动态分配关键帧动画，我们将使用 CSS 样式表的insertRule()方法。我们将从文本区域获取关键帧动画，然后将这些规则应用于我们的网页。

insertRule() 方法：该方法用于在当前 CSS 样式表中插入一些新的 CSS 规则(受一些限制)。

句法：

stylesheet.insertRule(rule [, index])

参数：该方法接受上面提到和下面描述的两个参数：

• Rule：一个 DOMstring，它本质上是要插入的 CSS 规则。

• index(optional): CSSStyleSheet.cssRules 中插入规则的索引

例子：

• HTML：首先，让我们使用 HTML 和 CSS 来制作我们页面的布局结构。

  html

  
  
  
    
    
  
  
    
  GeeksforGeeks
    
  
    
  
      
  
      ADD ANIMATION
    
    
  

• 输出：结构看起来像。
• JavaScript：现在，我们将在上面的文本区域中输入关键帧动画并将其添加到我们创建的元素中。

  javascript

  // Javascript code to add keyframes
  let styleSheet = null;
  dynamicAnimation = (name,styles) => {
  // Creating a style element
  // To add the keyframes
  if (!styleSheet){
    styleSheet = document.createElement('style');
    styleSheet.type = 'text/css';
    document.head.appendChild(styleSheet);
  }
  // Adding The Keyframes
  styleSheet.sheet.insertRule(`@keyframes ${name} {${styles}}`,
  styleSheet.length
  );
  }
     
  const form = document.getElementById("input");
  const text = document.getElementById("text");
  form.addEventListener('submit', (e)=>{
    e.preventDefault()
    // Adding an animation
    // NewAnimation, with the 
    // Keyframes to the Stylesheet
    dynamicAnimation('newAnimation', text.value);
    // Timing and duration can be altered
    // As per user requirements
    document.getElementById("element").style.animation = 
    'newAnimation 3s infinite';
  });
  

实现代码：

html

  
  


  GeeksforGeeks
  
  
    
    ADD ANIMATION
  
  
    #element{
      width: 200px;
      height: 200px;
      background-color: green;
      margin-bottom: 5px;
    }
  
  
    let styleSheet = null;
    dynamicAnimation = (name,styles) => {
    if (!styleSheet){
      styleSheet = document.createElement('style');
      styleSheet.type = 'text/css';
      document.head.appendChild(styleSheet);
    }
  
    styleSheet.sheet.insertRule(`@keyframes ${name} {${styles}}`,
    styleSheet.length
    );
    }
  
    const form = document.getElementById("input");
    const text = document.getElementById("text");
    form.addEventListener('submit', (e)=>{
      e.preventDefault();
      console.log("submitted");
      console.log(text.value);
  
      dynamicAnimation('newAnimation', text.value);
      document.getElementById("element").style.animation = 
                                'newAnimation 3s infinite';
    });
  

CSS：现在，我们要将以下关键帧规则集添加到文本框元素。

CSS

25%{
    transform : translateX(25%);
    border-radius : 25%;
   }
50%{
    transform : translateX(50%);
    border-radius : 50%;
   }
75%{
    transform : translateX(25%);
    border-radius : 25%;
}
100%{
    transform : translateX(0%);
    border-radius : 0%;
}

输出：

• 提交关键帧之前：

  

• 提交关键帧后：