css3+jQuery：两种简单动画实现方式

本文介绍了如何使用CSS3和jQuery创建动画效果。CSS3支持内置的动画功能，而jQuery提供了一种更加灵活的动画控制方式。在jQuery中，通过animate方法可以设置多种CSS属性的动画效果，需要注意的是，属性名需采用驼峰式命名，并且颜色动画可能需要额外的插件支持。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css3支持动画animate

完整代码（之后只给js部分）：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>简单动画</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            .rect{
                width: 100px;
                height: 100px;
                background-color: aqua;
                margin: 50px auto;
            }
            /* 动画基本设定 */
            #rect-1{
                /* 动画名称 */
                animation-name: an-re1;
                /* 动画时长（一个周期），默认0秒,单位是必要的，s或者ms */
                animation-duration: 3s;
            }
            @keyframes an-re1{
                /* from{}to{}是前一样式到后一样式，可叠加 */
                from{background-color: aqua;}
                to{background-color: red;}
            }
            #rect-2{
                animation-name: an-re2;
                animation-duration: 3s;
            }
            @keyframes an-re2{
                from{background-color: aqua;}
                to{background-color: red;}
                /* %可以设置不同进度不同样式，可叠加 */
                0% {margin-left: 0%;}
                33% {margin-left: 33%}
                66% {margin-left: 66%}
                100% {margin-left: 100%}
            }
            /* 动画常用设定 */
            #rect-3{
                /* 名称 */
                animation-name: an-re3;
                /* 时长 */
                animation-duration: 3s;
                /* 延时 */
                animation-delay: 2s;
                /* 方向，默认normal正向，reverse反向，alternate交替 */
                animation-direction:alternate;
                /* 次数，默认一次，infinite是无限次 */
                animation-iteration-count: infinite;
                /* 播放前样式，forwards开始前，backwards结束后，both同时（叠加） */
                animation-fill-mode:forwards;
                /* 暂停和运行，running运行，pause暂停 */
                animation-play-state:running;
                /* 速度曲线，linear线性，ease渐入（缓入），ease-in-out渐入渐出（缓入缓出），cubic-bezier(n,n,n,n)自定义速度曲线 */
                animation-timing-function:linear;
            }
            @keyframes an-re3{
                0% {margin-left: 0%;}
                33% {margin-left: 33%}
                66% {margin-left: 66%}
                100% {margin-left: 100%}
            }
        </style>
    </head>
    <body style="text-align: center;">
        <h1>简单动画</h1>
        <div class="rect" id="rect-1">矩形1</div>
        <div class="rect" id="rect-2">矩形2</div>
        <div class="rect" id="rect-3">矩形3</div>
        <div class="rect" id="rect-4">矩形4</div>
        <div class="rect" id="rect-5">矩形5</div>
        <div class="rect" id="rect-6">矩形6</div>
        <p id="demo"></p>
    </body>
    <script type="text/javascript" src="jquery-3.6.0.js"></script>
    <script>

    </script>
</html>

jQuery动画：

语法：$(selector).animate({params},speed,callback);

jquery选择器，动画方法({动画结束时参数}，播放速度（可选），回调函数（可选）)

如果需要更改动画开始前参数请使用css方法进行更改

代码：

    <script type="text/javascript" src="jquery-3.6.0.js"></script>
    <script>
        $(document).ready(function(){
            $("#rect-4").animate({marginLeft:"300px"},"slow");
            $("#rect-5").animate({marginLeft:"300px"},"fase");
            /* 分步执行多个动画遵循“队列”机制，简单来说就是从上往下依次执行
            同时设置多个属性执行动画使用“,”分隔
            经过测试发现slow的速度也相对较快，建议自己设置时间（单位毫秒），注意不要加引号 */
            $("#rect-6").animate({marginLeft:"300px",fontSize:"30px"},3000);
        });
    </script>

特别说明：

1.jQuery的animate方法设置css参数时必须使用驼峰式命名法（Camel 标记法），例如margin-left改为mariginLeft，同时属性值加引号。

2.jQuery的animate方法几乎可以设置所有css属性，但不包括颜色部分（w3c的版本，最新版不清楚），需要从 jQuery.com 下载 Color Animations 插件。