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

真实lie

于 2022-04-22 21:00:02 发布

阅读量2.1k

点赞数 1

分类专栏： jQuery css3 文章标签： jquery css3

本文链接：https://blog.csdn.net/qq_52824207/article/details/124353545

版权

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

摘要由CSDN通过智能技术生成

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;}