CSS @keyframes 动画：颜色变化、背景旋转与放大缩小

/* 定义一个名为colorChange的关键帧动画，用于颜色的变化 */
@keyframes colorChange {
    0%, 100% {
        color: #ff0000; /* 红色 */
    }
    50% {
        color: #00ff00; /* 绿色 */
    }
}
 
/* 定义一个名为rotateBackground的关键帧动画，用于背景旋转 */
@keyframes rotateBackground {
    from {
        background-position: 0% 50%;
    }
    to {
        background-position: 100% 50%;
    }
}
 
/* 定义一个名为scaleAnimation的关键帧动画，用于放大和缩小的动画 */
@keyframes scaleAnimation {
    0% {
        transform: scale(1); /* 初始大小 */
    }
    50% {
        transform: scale(1.5); /* 放大到1.5倍 */
    }
    100% {
        transform: scale(1); /* 恢复到初始大小 */
    }
}
 
/* 应用动画规则到相应的选择器上 */
.element-color-change {
    animation: colorChange 5s infinite alternate;
}
 
.element-rotate-background {
    background-image: url('background-image.jpg'); /* 设置一个背景图片 */
    background-size: cover; /* 背景图片覆盖整个元素 */
    animation: rotateBackground 10s linear infinite;
}
 
.element-scale {
    margin: 50px; /* 设置外边距以便更好的展示动画效果 */
    animation: scaleAnimation 5s infinite alternate;
}

这段代码定义了三个不同的关键帧动画，并将它们应用到了三个不同的HTML元素类上。第一个元素使用颜色变化的动画，第二个元素使用背景旋转的动画，第三个元素使用放大和缩小的动画。这些动画通过CSS的animation属性进行控制，并通过alternate使动画交替执行，提供了一个有趣的动画效果。