css和js实现动画的方式

CSS和JS是实现网页动画的两种常用方式，下面将介绍它们各自的实现方法。

首先是CSS，它通常使用CSS3中的animate属性来实现动画效果，例如：

    .Box {
        width: 100px;
        height: 100px;
        background-color: red;
        animation: myAnimation 2s ease infinite;
    }

    @keyframes myAnimation {
        0% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.2);
        }
        100% {
            transform: scale(1);
        }
    }

上述代码表示一个名为Box的元素，它会以一定的时间间隔无限循环地从原始大小缩放到放大1.2倍再回到原始大小。

现在来看一下JS实现动画的方法。JS通常使用定时器（setInterval或setTimeout）来控制元素的动态表现，例如：

    let Box = document.querySelector('.Box');
    let offset = 0;

    setInterval(function() {
        Box.style.left = offset + 'px';
        offset += 10;
        if (offset > 300) {
            offset = 0;
        }
    },50);

上述代码表示一个名为Box的元素，它会以一定的时间间隔无限循环地向右移动300px再回到原始位置。

综上所述，CSS和JS虽然实现方式不同，但它们都有各自的优劣势，开发者可以根据实际需求选择合适的方式来实现动画效果。