css3动画方式可选 |两个css背景动画怎么办

/* 方式 1. 过渡动画 */
/* 过渡动画通过改变 CSS 属性的值，在一段时间内逐渐实现从一个状态到另一个状态的过程。 */
.transition-animation {
transition: width 2s;
}
.transition-animation:hover {
width: 200px;
}
/* 方式 2. 关键帧动画 */
/* 关键帧动画允许大家在特定的时间点定义不同的动画状态。 */
.keyframe-animation {
animation: myanimation 3s infinite;
}
@keyframes myanimation {
0% {
left: 0;
background: blue;
}
50% {
left: 50%;
background: red;
}
100% {
left: 100%;
background: green;
}
}
/* 方式 3. 转换动画 */
/* 转换动画改变一个元素的形状、大小、位置或其它属性，使其看起来像是在运动。 */
.transform-animation {
transform: rotate(360deg);
}

以上是三种常用的 CSS3 动画方式，还有很多其他的方式，如动画延迟、动画缓动、反向动画等。选择哪种方式，应根据实际需求和效果来决定。