超硬核，css动画详细讲解

大手子唐可可

于 2024-07-29 14:14:21 发布

阅读量151

点赞数 3

文章标签： css html 前端

本文链接：https://blog.csdn.net/xiaowei0016/article/details/140770072

版权

1. CSS 动画的基本概念

CSS 动画主要由两个部分组成：

关键帧（Keyframes）：定义动画的状态和变化。
动画属性：控制动画的播放方式和效果。

2. 定义关键帧

使用 @keyframes 规则定义动画的关键帧。关键帧描述了动画在不同时间点的样式。

基本语法：

@keyframes animation-name {
    from {
        /* 动画开始时的样式 */
    }
    to {
        /* 动画结束时的样式 */
    }
}

你也可以使用百分比来定义多个关键帧：

@keyframes animation-name {
    0% {
        /* 动画开始时的样式 */
    }
    50% {
        /* 动画中间的样式 */
    }
    100% {
        /* 动画结束时的样式 */
    }
}

3. 应用动画

要将动画应用到元素上，需要使用以下属性：

animation-name：指定要使用的动画名称。
animation-duration：定义动画持续的时间。
animation-timing-function：定义动画的速度曲线（如线性、缓动等）。
animation-delay：定义动画开始前的延迟时间。
animation-iteration-count：定义动画的播放次数（如 infinite 表示无限循环）。
animation-direction：定义动画的播放方向（如 normal、reverse、alternate）。
animation-fill-mode：定义动画结束后的状态。

示例：

@keyframes example {
    from {
        transform: translateX(0);
        opacity: 0;
    }
    to {
        transform: translateX(100px);
        opacity: 1;
    }
}

.box {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    animation-name: example; /* 指定动画名称 */
    animation-duration: 2s; /* 动画持续时间 */
    animation-timing-function: ease; /* 动画速度曲线 */
    animation-delay: 0s; /* 动画延迟时间 */
    animation-iteration-count: infinite; /* 无限循环 */
    animation-direction: alternate; /* 交替播放 */
}

4. 动画属性的详细说明

4.1 `animation-name`

指定要使用的动画名称。

animation-name: example;

4.2 `animation-duration`

定义动画的持续时间，可以使用秒（s）或毫秒（ms）。

animation-duration: 2s; /* 2秒 */

4.3 `animation-timing-function`

定义动画的速度曲线。常用的值包括：

linear：匀速。
ease：缓动（开始慢，中间快，结束慢）。
ease-in：加速（开始慢，结束快）。
ease-out：减速（开始快，结束慢）。
ease-in-out：先加速后减速。

animation-timing-function: ease-in-out;

4.4 `animation-delay`

定义动画开始前的延迟时间。

animation-delay: 1s; /* 1秒延迟 */

4.5 `animation-iteration-count`

定义动画的播放次数，可以是具体的数字或 infinite。

animation-iteration-count: 3; /* 播放3次 */

4.6 `animation-direction`

定义动画的播放方向。

normal：正常播放。
reverse：反向播放。
alternate：交替播放（正向和反向交替）。
alternate-reverse：反向交替播放。

animation-direction: alternate;

4.7 `animation-fill-mode`

定义动画结束后的状态。

none：默认值，动画结束后不保持样式。
forwards：保持动画结束时的样式。
backwards：保持动画开始时的样式。
both：同时保持开始和结束时的样式。

animation-fill-mode: forwards;

5. 动画示例

以下是一个简单的 CSS 动画示例，展示一个方块从左到右移动并逐渐变透明。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 动画 示例</title>
    <style>
        @keyframes move {
            from {
                transform: translateX(0);
                opacity: 1;
            }
            to {
                transform: translateX(300px);
                opacity: 0;
            }
        }

        .box {
            width: 100px;
            height: 100px;
            background-color: #3498db;
            animation: move 2s ease-in-out infinite; /* 应用动画 */
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

6. 过渡效果

CSS 过渡是另一种创建动画效果的方式，主要用于在属性值变化时实现平滑过渡。与动画不同，过渡通常用于单一属性的变化。

基本语法：

.element {
    transition: property duration timing-function delay;
}

示例：

.box {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    transition: background-color 0.5s ease; /* 定义过渡效果 */
}

.box:hover {
    background-color: #2ecc71; /* 鼠标悬停时改变背景颜色 */

大手子唐可可

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
超硬核，css动画详细讲解

使用@keyframes规则定义动画的关键帧。关键帧描述了动画在不同时间点的样式。from {/* 动画开始时的样式 */to {/* 动画结束时的样式 */0% {/* 动画开始时的样式 */50% {/* 动画中间的样式 */100% {/* 动画结束时的样式 */。
复制链接

扫一扫