美文网首页
JavaScript 中,可以使用 Element.animat

JavaScript 中,可以使用 Element.animat

作者: 懒惰的狮子 | 来源:发表于2023-05-13 09:37 被阅读0次

    创建一个移动动画

    const element = document.getElementById('box');
    element.animate([
      // 开始状态
      { transform: 'translateX(0px)' },
      // 结束状态
      { transform: 'translateX(100px)' }
    ], {
      // 动画持续时间
      duration: 1000,
      // 延迟时间
      delay: 500,
      // 重复次数
      iterations: Infinity
    });
    

    创建一个渐变动画

    const element = document.getElementById('box');
    element.animate([
      // 开始状态
      { opacity: 0 },
      // 结束状态
      { opacity: 1 }
    ], {
      // 动画持续时间
      duration: 1000,
      // 延迟时间
      delay: 500,
      // 重复次数
      iterations: Infinity
    });
    

    创建一个组合动画

    const element = document.getElementById('box');
    element.animate([
      // 开始状态
      { opacity: 0, transform: 'translateX(0px)' },
      // 结束状态
      { opacity: 1, transform: 'translateX(100px)' }
    ], {
      // 动画持续时间
      duration: 1000,
      // 延迟时间
      delay: 500,
      // 重复次数
      iterations: Infinity
    });
    

    需要注意的是,Element.animate() 方法并非所有浏览器都支持,可以使用 CSS3 动画或 JavaScript 定时器等其他方法来实现兼容性更好的动画效果

    相关文章

      网友评论

          本文标题:JavaScript 中,可以使用 Element.animat

          本文链接:https://www.haomeiwen.com/subject/dnvssdtx.html