使用.animate()方法实现元素动画效果

使用.animate()方法可以实现元素动画效果，它是一种非常有效的方法，可以让网页元素变得更加有趣。

它是一个JavaScript函数，可以接受一个参数，这个参数是一个对象，包含要改变的CSS属性和对应的目标值。

要使用.animate()方法，需要获取要改变的元素，可以使用document.querySelector()方法获取。就可以调用.animate()方法，并传入一个对象，包含要改变的CSS属性和对应的目标值。

let element = document.querySelector('.element');
element.animate({
    left: '100px',
    opacity: 0.5
});

上面的代码将元素的left属性改变为100px，opacity属性改变为0.5。

.animate()方法还可以接受第二个参数，这个参数是一个对象，用来设置动画的速度、延迟、重复等属性。

let element = document.querySelector('.element');
element.animate({
    left: '100px',
    opacity: 0.5
}, {
    duration: 500,
    delay: 100,
    iterations: 3
});

上面的代码将动画持续时间设置为500ms，延迟时间设置为100ms，重复次数设置为3次。

.animate()方法可以让网页元素变得更加有趣，它可以接受两个参数，一个是要改变的CSS属性和对应的目标值，另一个是设置动画的速度、延迟、重复等属性。