JavaScript 中,可以使用 Element.animat

2023-05-13  本文已影响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 定时器等其他方法来实现兼容性更好的动画效果

上一篇下一篇

猜你喜欢

热点阅读