css动画jq |css 文字翻转效果

/* CSS动画示例 */
@keyframes move {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(100px);
}
}
.box {
width: 100px;
height: 100px;
background-color: blue;
animation: move 2s ease-out infinite;
}

上面的CSS动画示例包括了一个移动效果的示例，其中用到了动画关键帧（使用@keyframes声明）、变换属性（使用transform）和动画属性（使用animation声明）。该动画表示一个蓝色的正方形不停地向右移动100像素。

// jQuery动画示例
$(document).ready(function() {
$("#btn").click(function() {
$("#box").animate({
left: '+=50px'
}, 1000);
});
});

这个jQuery动画示例包括了一个按钮和一个箱子元素。当点击按钮时，箱子元素将左移50像素，动画持续时间为1秒。这里使用了jQuery的动画函数animate，它可以根据指定的参数实现各种不同的动态效果。

CSS动画和jQuery动画都可以为网页添加更加动态和生动的效果，但使用场景不同。CSS动画适合制作比较静态的效果，比如页面进入时的动画效果、淡入淡出效果等；而jQuery动画则更适合实现用户交互的效果，比如点击按钮触发的动画。