css动画通过web动画

CSS动画是一种在web开发中广泛使用的前端技术，可以通过使用预先定义好的CSS属性和关键帧来创建平滑的动态效果。Web动画是另一个强大的动态技术，它可以利用JavaScript运行时动态创建复杂的交互式动画。这两种技术可以结合使用，以充分发挥其各自的优势。

/* CSS动画 */

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

/* Web动画 */

const elem = document.getElementById('myElement')
elem.animate([
  { transform: 'scale(1)' },{ transform: 'scale(1.5)' }
],{ 
  duration: 1000,iterations: Infinity 
})

通过使用CSS动画和Web动画，开发人员可以创建具有丰富交互和效果的动态网页。CSS动画适用于静态场景，而Web动画适用于需要动态计算、交互和事件处理的场景。例如，在一个购物网站上，当用户将鼠标悬停在一个商品上时，可以使用CSS动画来创建一个平滑的动态边框，以吸引用户的注意力。而当用户点击商品并开始添加到购物车时，可以使用Web动画来创建一个运动的购物车，以增强用户的购物体验。