美文网首页
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