css动画多个效果 |vh css

/* 动画1: 旋转效果 */
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 动画2: 放大效果 */
@keyframes zoom {
from {
transform: scale(1);
}
to {
transform: scale(1.5);
}
}
/* 动画3: 渐变效果 */
@keyframes fade {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
/* 实现多个效果 */
.box {
width: 100px;
height: 100px;
background-color: #f00;
/* 同时使用多个效果 */
animation: rotate 2s ease-in-out infinite, zoom 1s ease-in-out infinite alternate, fade 2s ease-in-out infinite;
}

上述代码中定义了三个不同的动画效果，分别是旋转、放大、渐变。这些效果可以通过 @keyframes 规则来定义，用于控制效果的实现过程。下面是实现多个效果的示例代码，使用了三个效果分别控制旋转、放大、渐变，并且同时使用了多个效果，使用逗号隔开。最终的效果为一个红色正方形，既在自身不断旋转，又放大缩小，同时渐变消失。