css3 动画和jquery动画

CSS3动画与jQuery动画都是网页前端中常用的动画技术，不过二者实现的方式有所不同。

CSS3动画是通过CSS3的特性来实现的，可以实现一些较简单的动画效果。例如：

/* 设置动画 */
.animation {
    animation: my-first 5s;
}

/* 定义动画关键帧 */
@keyframes my-first {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

上面的代码定义了一个从透明度为0到透明度为1的动画效果。在HTML中使用.animation类来应用此动画即可。

而jQuery动画则是通过JavaScript代码来实现的，可以实现较为复杂的动画效果。例如：

/* 设置动画 */
$(".Box").animate({
    opacity: 0.5,left: "100px",height: "50px",width: "50px"
},1000);

上面的代码定义了一个在1秒钟内，透明度变为0.5，距离左边缘移动100像素，高度和宽度均变为50像素的动画效果。通过选取.Box类来应用此动画即可。

通过对比两者的实现方式，我们可以看出两者各有优劣。CSS3动画不需要编写JavaScript代码，实现代码比较简洁；而jQuery动画可以实现更为复杂的动画效果，可控性更高。在实际应用中，可以根据具体需求选择相应的动画技术。