创建一个移动动画
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 定时器等其他方法来实现兼容性更好的动画效果
网友评论