《深入浅出LLM基础篇》：大模型结构分类

CSS3 动画是通过 @keyframes 规则和 animation 属性来实现的。以下是如何使用 CSS3 来实现动画的基本步骤：

1. 定义关键帧（@keyframes）

首先，你需要使用 @keyframes 规则定义动画的步骤。这包括动画的开始（0%）和结束（100%），以及任何中间步骤。

@keyframes example {
    0% { transform: translateX(0); }
    25% { transform: translateX(100px); }
    50% { transform: translateX(200px); }
    75% { transform: translateX(100px); }
    100% { transform: translateX(0); }
}

2. 应用动画

然后，将定义好的动画应用到选择器上，使用 animation 属性。这个属性可以包含多个子属性，如动画名称、持续时间、延迟、迭代次数等。

div {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    animation-name: example;
    animation-duration: 4s;
    animation-timing-function: ease-in-out;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: forwards;
}

动画属性详解：

• animation-name: 指定 @keyframes 中定义的动画名称。
• animation-duration: 动画完成一个周期所需的时间。
• animation-timing-function: 定义动画速度变化曲线，如 linear, ease-in, ease-out, ease-in-out。
• animation-delay: 动画开始前的延迟时间。
• animation-iteration-count: 动画播放的次数，infinite 表示无限循环。
• animation-direction: 定义动画播放的方向，如 normal, reverse, alternate, alternate-reverse。
• animation-fill-mode: 指定动画在开始前和结束后应用的样式，如 none, forwards, backwards, both。

动画示例：

1. 滑动进入：元素从屏幕外滑动进入可视区域。
2. 淡入淡出：元素的透明度从0变为1，或从1变为0。
3. 旋转：元素围绕中心点旋转一定角度。
4. 跳动：元素上下跳动，模拟弹跳效果。
5. 闪烁：元素快速闪烁，用于吸引用户注意。
6. 加载动画：如旋转的加载图标，表示内容正在加载。
7. 下拉刷新：下拉页面时显示的动画效果，模拟刷新动作。

以下是一些具体的 CSS 动画示例：

滑动进入动画

@keyframes slideIn {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.slide-in-element {
    animation: slideIn 1s ease-out forwards;
}

淡入动画

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fade-in-element {
    animation: fadeIn 2s ease-in forwards;
}

旋转动画

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.rotate-element {
    animation: rotate 2s linear infinite;
}