在一组关键帧上启动CSS动画，然后循环另一组关键帧

基础概念

CSS动画是一种通过CSS样式表定义的动画效果，它允许开发者在不使用JavaScript的情况下实现页面元素的动态效果。CSS动画主要通过@keyframes规则来定义动画的关键帧，然后通过animation属性将定义好的动画应用到元素上。

类型

CSS动画主要有以下几种类型：

关键帧动画：通过@keyframes定义动画的关键帧，可以精确控制动画的每一阶段。
过渡动画：通过transition属性实现元素状态的平滑过渡。

应用场景

CSS动画广泛应用于各种网页和应用的UI设计中，例如：

页面加载动画
按钮点击效果
图片轮播
表单验证提示

示例代码

假设我们有两个关键帧动画，一个是animationA，另一个是animationB，我们希望在animationA播放完毕后循环播放animationB。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Animation Example</title>
    <style>
        @keyframes animationA {
            0% { transform: translateX(0); }
            100% { transform: translateX(100px); }
        }

        @keyframes animationB {
            0% { transform: translateY(0); }
            100% { transform: translateY(100px); }
        }

        .animated-element {
            width: 100px;
            height: 100px;
            background-color: red;
            animation: animationA 2s forwards, animationB 2s 2s infinite;
        }
    </style>
</head>
<body>
    <div class="animated-element"></div>
</body>
</html>

解释

@keyframes animationA定义了第一个动画，元素从初始位置向右移动100px。
@keyframes animationB定义了第二个动画，元素从初始位置向下移动100px。
.animated-element选择器应用了这两个动画：
- animationA持续2秒，使用forwards保持最终状态。
- animationB在animationA结束后2秒开始，持续2秒，无限循环。