快速理解CSS3中动画属性

最新推荐文章于 2026-03-23 08:27:28 发布

原创最新推荐文章于 2026-03-23 08:27:28 发布 · 276 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

本文详细介绍了CSS3中的动画属性，包括@keyframes的声明和使用，以及如何通过animation属性调用和配置动画。通过实例展示了如何创建一个元素的平移和旋转动画，帮助读者快速掌握CSS3动画的实现方法。

快速理解CSS3中动画属性

动画的原理是，将一套 CSS 样式逐渐变化为另一套样式，并且在动画过程中，可以多次改变这套 CSS 样式。

文章目录

快速理解CSS3中动画属性

一、动画属性的声明

1、@keyframes 动画的名称 {

from{ } //（起始位置，与0%相同）

to{ } // （终点位置，与100%相同）

}

        @keyframes divMove {
            from {
                left: 0;
                top: 0;
            }
            to {
                left: 400px;
                top: 0;
            }
        }

注：只能用于单次运动

2、@keyframes 动画的名称 {

0%{ }

50%{ }

100%{ }

}

       @keyframes divMove {
            0%{
                left: 0;
                top: 0;
            }
            50%{
                left: 200px;
                top: 0;
            }
            100%{
                left: 400px;
                top: 0;
            }
        }

注：可以用于多次运动

二、动画属性的调用

1、（简写） animation: 动画名称运动时间运动方式运动次数；

    	animation: pMove 10s linear 2;

2、属性解析

	属性名	属性值
动画的名称	animation-name	任意设置，符合规范即可，如 divMove
动画的运动时间	animaton-duration	单位秒；如 3s
动画的运动方式	animation-timing-function	ease（默认）/linear（匀速）/cubic-bezier(n,n,n,n)
动画的延迟	animation-delay	单位秒；如 1s
动画循环的次数	animation-iteration-count	次数（如：3）/infinite（无限循环）
动画的运动方向	animation-direction	normal（顺时针，默认）/reverse（逆时针）
动画的运动状态	animation-play-state	running（运动）/paused（暂停）

注：

① 动画的延迟表示几秒后开始运动

② cubic-bezier(n,n,n,n) ：贝塞尔曲线，以自己想要的方式运动

用法网址：https://cubic-bezier.com/#.17,.67,.97,.63

③ 动画的运动方式还有多种：

animation-timing-function（动画的运动方式）

ease	默认。动画以低速开始，然后加快，在结束前变慢。
linear	匀速运动
ease-in	加速运动
ease-out	减速运动
cubic-bezier(n,n,n,n)	贝塞尔曲线，如：cubic-bezier(.17,.67,.73,.19)

三、具体实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*清除默认样式*/
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 400px;
            height: 400px;
            border: 1px solid black;
            margin: 50px auto;

            /*由于动画需要用的几套css样式，所以得用定位*/
            /*这行代码用于给子级盒子提供绝对定位的参照物*/
            position: relative;
        }
        p{
            width: 100px;
            height: 20px;
            border: 1px solid black;

            /*添加定位*/
            position: absolute;

            /*动画的调用*/
            animation: pMove 10s linear 2;
            /*也可以写为*/
            /*  
            animation-name: pMove;
            animation-duration: 10s;
            animation-timing-function: linear;
            animation-iteration-count: 2;
            */

        }

        /*动画的声明*/
        @keyframes pMove{
            /*0%和100%尽量写上，不要漏掉*/
            /*设置的属性必须相同和相对应，比如我设置的top和left，那么每一个阶段都要设置top和left*/
            /*初始位置*/
            0%{
                top: 10px;
                left: 10px;
            }
            25%{
                top: 10px;
                left: 290px;
            }
            50%{
                top: 370px;
                left: 290px;
            }
            75%{
                top: 370px;
                left: 10px;
            }
            /*结束位置*/
            100%{
                top: 10px;
                left: 10px;
            }
        }

    </style>
</head>
<body>  
    <!-- 设置一个大盒子，让小盒子在里面运动 -->
    <div>
        <p>会动的一段话</p>
    </div>
</body>
</html>