前端css中animation(动画)的使用

最新推荐文章于 2024-09-29 16:39:28 发布
最新推荐文章于 2024-09-29 16:39:28 发布
阅读量7k 收藏 51
点赞数 19
分类专栏： # css 文章标签： 前端 css animation
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44925904/article/details/138492262
版权

前端css中animation的使用

一、前言

animation常伴随着动画帧@keyframes一起使用。本文主要说明animation都有啥属性，然后简单的进行使用。

二、主要内容说明

animation动画有多个属性，每个属性也有相应相关的值。另外我们使用过程中也可以使用简便方法，如“animation:”+后面各属性的值，用空格隔开+“；”的形式设置动画效果。举例如：animation: box1 3s linear 2s infinite;，表示创建一个叫box1，持续时间3s，开始到结束的动画速度不变，延迟2s后再开始，不断重复的动画。各值要按排序要求设置好。

（一）、animation-name（名称）属性

animation-name用于定义动画的名称。当我们创建一个动画时，给他编辑一个名称方便管理些。如某个动画取名为n，要关键帧@keyframes配合运行这个n动画，则关键帧里需要指定索引这个名称n，最后关键帧就可以确定是要进行这个n动画了。当然不给@keyframes关键帧指定对象运行动画，他也不懂要运行啥。

（二）、animation-duration（持续时间）属性

duration为持续时间。那么animation-duration则为定义动画的持续时间的属性，通常以秒(s)或毫秒(ms)为单位。

1.前两个属性举例，源码1

我们先创建个盒子，盒子名叫box-max，宽高各100px，天蓝色背景。使用动画效果使得盒子逐渐变透明，这个动画效果叫box1，动画持续持续3s。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animation 动画效果</title>
    <style>
        /* 定义.box-max类的样式，设置盒子的尺寸和背景颜色 */
        .box-max {
            width: 100px;             /* 盒子宽度 */
            height: 100px;            /* 盒子高度 */
            background-color: aqua;   /* 盒子背景颜色为水蓝色 */
            animation-name: box1;     /* 应用动画名称为box1 */
            animation-duration: 3s;   /* 动画持续时间为3秒 */
        }

        /* 定义名为box1的关键帧动画 */
        @keyframes box1 {
            0% {
                opacity: 1;           /* 动画开始时，盒子完全不透明 */
            }
            100% {
                opacity: 0.3;         /* 动画结束时，盒子透明度为0.3 */
            }
        }

    </style>
</head>
<body>
    <!-- 动画作用的元素，带有描述性文本 -->
    <div class="box-max">
        我是一个盒子，名称为box1，我会逐渐变透明。
    </div>
</body>
</html>

2.源码1运行效果

（1）、视频效果

动画名称+动画运行时间，源码1

（2）、截图效果
  • 开始时
    在这里插入图片描述
  • 逐渐透明化
    在这里插入图片描述

（三）、animation-timing-function属性

timing（时序），function（函数）。animation-timing-function用于控制动画的速度曲线。动画有运行的时段，有些时段我们想让它快些，有些时段我们想让它慢性，此时可以根据需要自己设置好animation-timing-function的值便可，常用的值有

  • linear ------ 从头到尾，动画的运行速度相同。
  • ease ------ 默认值，开始低速，然后加快，结束前变慢。
  • ease-in ------ 低速开始，结束前不断变快。
  • ease-out ------ 快速开始，结束前不断变慢。
  • ease-in-out ------ 开始和结束时段是慢速，中间部分速度最快。
  • cubic-bezier(n,n,n,n) ------ 贝塞尔曲线，可以自己设置速度曲线。

1.使用贝塞尔曲线举例，源码2

源码1的基础上，使用animation-timing-function属性的cubic-bezeier自己设置值。开始动画速度较快，后面结束段部分动画速度慢。运行效果和源码1类似。源码1为默认情况下的ease值（前面慢，后面加快，结束前变慢），源码2设置的是动画速度前部分快和源码1运行效果略微不同。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animation 动画效果</title>
    <style>
        /* 定义.box-max类的样式，设置盒子的尺寸、背景颜色和动画效果 */
        .box-max {
            width: 100px;             /* 盒子宽度 */
            height: 100px;            /* 盒子高度 */
            background-color: aqua;   /* 盒子背景颜色为水蓝色 */
            animation-name: box2;     /* 应用动画名称为box2 */
            animation-duration: 4s;   /* 动画持续时间为4秒 */
            animation-timing-function: cubic-bezier(1, 1, 0.8, 0.2); /* 自定义的三次贝塞尔曲线，用于控制动画速度 */
        }

        /* 定义名为box1的关键帧动画，控制透明度从不透明到半透明的过渡 */
        @keyframes box2 {
            0% {
                opacity: 1;           /* 动画开始时，盒子完全不透明 */
            }
            100% {
                opacity: 0.1;         /* 动画结束时，盒子透明度为0.1 */
            }
        }
    </style>
</head>
<body>
    <!-- 动画作用的元素，提供简单的文本描述 -->
    <div class="box-max">
        我是一个盒子，名称为box2，我会逐渐变透明。
    </div>
</body>
</html>

2.源码2运行效果

（1）、视频效果

动画的速度曲线，源码2

（2）、截图效果

  • 动画开始阶段
    在这里插入图片描述

  • 动画快结束阶段
    在这里插入图片描述

（四）、animation-delay（延迟）属性

delay（延迟）。顾名思义，animation-delay为延迟的时间，动画开始前的延迟时间。因为有时候我们不需要动画马上运行，需要延迟一定的时间后再开始。单位同样取秒(s)或毫秒(ms)。
后面的源码3小盒子在等待期间，它是显示的，不是透明的状态效果，需要等待2s后才开始进行动画由透明变为不透明，这里是属性animation-fill-mode的默认值none设置的作用。后面也会讲到这部分关于动画前、后的内容。

1.动画延迟举例，源码3

我们先创建两个盒子，一个大盒子，一个小盒子。大盒子程序一运行便进行动画效果，小盒子程序刚开始运行先等2s再进行动画效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animation 动画效果</title>
    <style>
        /* 定义.box-max类的样式，设置较大盒子的尺寸、背景颜色和动画效果 */
        .box-max {
            width: 200px;             /* 盒子宽度 */
            height: 200px;            /* 盒子高度 */
            background-color: aqua;   /* 盒子背景颜色为水蓝色 */
            animation-name: box3-1;   /* 应用动画名称为box3-1 */
            animation-duration: 4s;   /* 动画持续时间为4秒 */
            animation-timing-function: linear; /* 动画速度函数为线性，即动画速度恒定 */
        }
        /* 定义.box-min类的样式，设置较小盒子的尺寸、背景颜色和动画效果 */
        .box-min {
            width: 150px;             /* 盒子宽度 */
            height: 150px;            /* 盒子高度 */
            background-color: yellowgreen;   /* 盒子背景颜色为黄绿色 */
            animation-name: box3-2;   /* 应用动画名称为box3-2 */
            animation-duration: 4s;   /* 动画持续时间为4秒 */
            animation-timing-function: linear; /* 动画速度函数为线性 */
            animation-delay: 2s;      /* 动画延迟2秒开始 */
        }

        /* 定义名为box3-1的关键帧动画，控制透明度从全透明到不透明的过渡 */
        @keyframes box3-1 {
            0% {
                opacity: 0;           /* 动画开始时，盒子完全透明 */
            }
            100% {
                opacity: 1;           /* 动画结束时，盒子完全不透明 */
            }
        }
        /* 定义名为box3-2的关键帧动画，控制透明度从全透明到不透明的过渡 */
        @keyframes box3-2 {
            0% {
                opacity: 0;           /* 动画开始时，盒子完全透明 */
            }
            100% {
                opacity: 1;           /* 动画结束时，盒子完全不透明 */
            }
        }
    </style>
</head>
<body>
    <!-- 动画作用的较大元素，提供简单的文本描述 -->
    <div class="box-max">
        我是一个盒子，名称为box3-1，我会逐渐变不透明。
    </div>
    <!-- 动画作用的较小元素，提供简单的文本描述 -->
    <div class="box-min">
        我也是一个盒子，名称为box3-2，我也会逐渐变不透明。
    </div>
</body>
</html>

2.源码3运行效果

（1）、视频效果

动画延迟属性，源码3

（2）、截图效果

大盒子先逐渐不透明化的动画，小盒子等2s后才进行不透明化的动画。

  • 程序运行前部分效果，截图如下
    在这里插入图片描述
  • 程序运行后部分效果，截图如下
    在这里插入图片描述

（五）、animation-iteration-count（反复计数）属性

iteration（反复），count（计数）。animation-iteration-count用于定义动画播放的次数。一段动画我们设置的时间若有限，想让动画多运行几次可以用此属性设置。取值的方式主要有以下几种。

  • 整数 ------ 设置整数值，如1、2、3，当为3时表示动画重复运行3次。
  • 小数 ------ 设置小数，如2.5，那么表示动画重复2次，第三次进行一半。
  • infinite ------ 取值infinite(无限的)则重复运行动画

1.重复动画，源码4

我们创建一个盒子，背景添加图片，盒子变圆，然后产生一个左边滚到右边的动画，动画一直重复运行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animation 动画效果</title>
    <style>
        /* 设置动画效果的基本样式 */
        .box-max {
            width: 100px;                  /* 盒子宽度设置为100像素 */
            height: 100px;                 /* 盒子高度设置为100像素 */
            background-image: url('./小蜗牛.jpg'); /* 设置背景图片，确保路径正确 */
            background-size: cover;        /* 背景图片覆盖整个元素区域 */
            border-radius: 50%;            /* 设置圆形边框，使盒子呈圆形 */
            position: relative;            /* 设置相对定位，以便使用left属性和transform */
            animation-name: box4;          /* 引用定义的关键帧动画名称 */
            animation-duration: 4s;        /* 动画持续时间为4秒 */
            animation-timing-function: linear; /* 动画的时间函数设置为线性，速度恒定 */
            animation-iteration-count: infinite; /* 动画无限重复播放 */
        }

        /* 定义动画关键帧 */
        @keyframes box4 {
            from {
                left: 0; /* 动画开始时，元素从容器的最左端开始 */
                transform: rotate(0deg); /* 开始旋转时角度为0度 */
            }
            to {
                left: calc(100% - 100px); /* 动画结束时，元素移动到容器宽度减去元素宽度的位置 */
                transform: rotate(360deg); /* 结束旋转时完成360度旋转 */
            }
        }
    </style>
</head>
<body>
    <div class="box-max"></div> <!-- 动画作用的元素，显示为一个旋转并左右移动的圆形 -->
</body>
</html>

2.源码4运行效果

（1）、视频效果

动画持续进行，源码4

（2）、截图效果

  • 动画开始前部分
    在这里插入图片描述

  • 动画开始后部分
    在这里插入图片描述

（六）、animation-direction（方向）属性

direction(方向)，属性animation-direction用于设置动画的播放方式，是从头到尾正向播放，或是从尾到头的倒放。当我们设置关键帧，开始为0%，结束为100%的状态，正向为0%到100%的动画变换，反向倒放为100%到0%的动画变换。属性值主要有下面4个。

  • normal ------ 动画正放，动画一周期解释后重置到开始位置。
  • reverse ------- 动画倒放
  • alternate ------ 动画在奇数次正向播放，偶数次反向播放。如过一个动画是持续播放的，程序刚开始动画为第一次，这一次播放完毕便进行第二次，以此类推。当是奇数，如1,3,5···时，动画就正向播放；当是偶数，如2,4,6···时，动画就反向播放。
  • alternate-reverse ------ 与alternate属性相反，动画在奇数次反向播放，偶数次正向播放。

1.方向动画效果，源码5

我们在源码4的基础上添加alternate的播放方式，原本源码4的动画中图片是不断由左滚向右边，我们使用alternate的方式，便可让图片来回滚动了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animation 动画效果</title>
    <style>
        /* 设置动画效果的基本样式 */
        .box-max {
            width: 100px;                  /* 盒子宽度设置为100像素 */
            height: 100px;                 /* 盒子高度设置为100像素 */
            background-image: url('./小蜗牛.jpg'); /* 设置背景图片，确保路径正确 */
            background-size: cover;        /* 背景图片覆盖整个元素区域 */
            border-radius: 50%;            /* 设置圆形边框，使盒子呈圆形 */
            position: relative;            /* 设置相对定位，以便使用left属性和transform */
            animation-name: box4;          /* 引用定义的关键帧动画名称 */
            animation-duration: 4s;        /* 动画持续时间为4秒 */
            animation-timing-function: linear; /* 动画的时间函数设置为线性，速度恒定 */
            animation-iteration-count: infinite; /* 动画无限重复播放 */
            animation-direction: alternate; /* 动画在完成一次循环后反向播放 */
        }

        /* 定义动画关键帧 */
        @keyframes box4 {
            from {
                left: 0; /* 动画开始时，元素从容器的最左端开始 */
                transform: rotate(0deg); /* 开始旋转时角度为0度 */
            }
            to {
                left: calc(100% - 100px); /* 动画结束时，元素移动到容器宽度减去元素宽度的位置 */
                transform: rotate(360deg); /* 结束旋转时完成360度旋转 */
            }
        }
    </style>
</head>
<body>
    <div class="box-max"></div> <!-- 动画作用的元素，显示为一个旋转并左右移动的圆形 -->
</body>
</html>

2.源码5运行效果

（1）、视频效果

动画来回滚动，源码5

（2）、截图效果

  • 开始前部分，奇数次
    在这里插入图片描述

  • 后部分，奇数次
    在这里插入图片描述

  • 开始前部分，偶数次
    在这里插入图片描述

  • 后部分，偶数次
    在这里插入图片描述

（七）、animation-fill-mode属性

animation-fill-mode主要用于定义动画前后的元素状态。主要属性值如下

  • none ------ 默认值，动画不会对元素在动画开始前或结束后形式参数产生任何影响。动画开始前，元素显示css非动画状态的形式；动画结束元素回到动画未运行前的初始状态。
  • forwards ------ 动画完成后，元素保持在动画的最后关键帧。就是动画运行到哪里，结束后它就保持在哪里，不会回初始点了。
  • backwards ------ 动画开始前，元素显示动画的第一个关键帧的样式。当我们设置一个盒子，进行的动画是刚开始开始是透明的，后面慢慢变得完全不透明。默认情况下，在等待运行前，盒子长啥样它就显示啥样，动画开始后才运行从透明变为不透明的状态，如源码3中的小盒子的属性，小盒子是延迟2s钟才开始运行动画，在这2s中的等待期盒子是显示盒子本身的具体样子，并不是以透明的状态进行等待。若要达到在动画运行前的等待期间为透明效果，就可以运用backwards的属性，在动画开始前的等待期，它显示的是第一关键帧的时候的样子，也就是透明的样子。
  • both ------ 结合了forwards和backwards的效果。动画开始前的等待期他是第一关键帧的样子，动画结束后保持在最后结束时的模样，也不会回到原点了。

1.动画结束后停在最后关键帧，源码6-1

在源码5上修改，使图片从左往右只滚动一次，默认情况下，图片滚动完后又恢复到初始左边位置。然后设置forwards属性，如
animation-fill-mode: forwards; /* 动画结束时元素保持最终状态 */
此时图片滚动完后图片就直接停在动画最后关键帧的位置，不会回原本位置了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animation 动画效果</title>
    <style>
        /* 设置动画效果的基本样式 */
        .box-max {
            width: 100px;                  /* 盒子宽度设置为100像素 */
            height: 100px;                 /* 盒子高度设置为100像素 */
            background-image: url('./小蜗牛.jpg'); /* 设置背景图片，确保路径正确 */
            background-size: cover;        /* 背景图片完全覆盖元素区域，无空隙 */
            border-radius: 50%;            /* 设置盒子为圆形 */
            position: relative;            /* 使用相对定位，支持left属性和transform变换 */
            animation-name: box4;          /* 使用名为box4的关键帧动画 */
            animation-duration: 4s;        /* 动画总持续时间为4秒 */
            animation-timing-function: linear; /* 动画时间函数为linear，即动画速度恒定 */
            animation-iteration-count: 1;  /* 动画播放一次 */
            animation-fill-mode: forwards; /* 动画结束时元素保持最终状态 */
        }

        /* 定义动画关键帧 */
        @keyframes box4 {
            from {
                left: 0; /* 动画开始时元素位于容器的最左端 */
                transform: rotate(0deg); /* 动画开始时旋转角度为0度 */
            }
            to {
                left: calc(100% - 100px); /* 动画结束时元素位于容器宽度减去元素宽度的位置 */
                transform: rotate(360deg); /* 动画结束时元素完成一圈（360度）旋转 */
            }
        }
    </style>
</head>
<body>
    <div class="box-max"></div> <!-- 动画作用的元素，显示为一个旋转并左右移动的圆形 -->
</body>
</html>

2.源码6-1运行效果

（1）、视频效果

动画结束后停在后面一帧，源码6-1

（2）、截图效果
  • 动画开始的前段状态
    在这里插入图片描述
  • 动画结束状态
    在这里插入图片描述
  • 注释掉animation-fill-mode: forwards; /* 动画结束时元素保持最终状态 */，也就是默认其况下的运行完后的状态。
    ~~在这里插入图片描述~~

3.动画开始前元素第一关键帧状态，源码6-2

在源码3的小盒子部分上添加
animation-fill-mode: backwards;动画开始前应用第一帧的状态，结束后回到初始状态
小盒子等2s后才开始动画，在这2s的等待期，小盒子显示为第一关键帧的状态，一开始关键帧为透明。源码3的效果，小盒子在2s这期间都是整个显示，并没有透明效果。使用backwards属性，那么盒子在动画前的等待期也就是这2s内显示的是第一关键帧的状态，也就是透明的状态。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animation 动画效果</title>
    <style>
        /* 设置动画效果的基本样式 */
        /* 定义.box-max类，为较大盒子设置样式和动画 */
        .box-max {
            width: 200px;                      /* 盒子宽度设置为200像素 */
            height: 200px;                     /* 盒子高度设置为200像素 */
            background-color: aqua;            /* 盒子背景颜色设置为水蓝色 */
            animation-name: box3-1;            /* 应用名为box3-1的动画 */
            animation-duration: 4s;            /* 动画持续时间设置为4秒 */
            animation-timing-function: linear; /* 动画速度函数设置为线性，速度恒定 */
            animation-fill-mode: forwards;     /* 动画结束后保持最后一帧的状态 */
        }

        /* 定义.box-min类，为较小盒子设置样式和动画 */
        .box-min {
            width: 150px;                      /* 盒子宽度设置为150像素 */
            height: 150px;                     /* 盒子高度设置为150像素 */
            background-color: yellowgreen;     /* 盒子背景颜色设置为黄绿色 */
            animation-name: box3-2;            /* 应用名为box3-2的动画 */
            animation-duration: 4s;            /* 动画持续时间设置为4秒 */
            animation-timing-function: linear; /* 动画速度函数设置为线性 */
            animation-delay: 2s;               /* 动画延迟2秒开始 */
            animation-fill-mode: backwards;    /* 动画开始前应用第一帧的状态，结束后回到初始状态 */
        }

        /* 动画box3-1关键帧定义 */
        @keyframes box3-1 {
            0% { opacity: 0; } /* 动画开始时盒子完全透明 */
            100% { opacity: 1; } /* 动画结束时盒子完全不透明 */
        }

        /* 动画box3-2关键帧定义 */
        @keyframes box3-2 {
            0% { opacity: 0; } /* 动画开始时盒子完全透明 */
            100% { opacity: 1; } /* 动画结束时盒子完全不透明 */
        }
    </style>
</head>
<body>
    <div class="box-max">
        我是一个盒子，名称为box3-1，我会逐渐变不透明。
    </div>
    <div class="box-min">
        我也是一个盒子，名称为box3-2，我也会逐渐变不透明。
    </div>
</body>
</html>

4.源码6-2运行效果

（1）、视频效果

动画前等待期小盒子第一帧透明状态，源码6-2

（2）、截图效果

  • 前段截图
    在这里插入图片描述

  • 中段截图
    在这里插入图片描述

  • 后段截图
    在这里插入图片描述

（八）、animation-play-state（播放状态）属性

state（状态）。animation-play-state用于控制动画的播放状态。在动画过程中我们可以暂停动画，也可以暂停后继续运行。值主要有两个。即running和paused。当running时，动画正常播放。当paused时，动画则停在当前帧。

1.动画暂停或继续，源码7

我们在源码5的基础上添加鼠标悬停:hover效果，当鼠标碰到图片时使得animation-play-state变为paused暂停动画，当鼠标移开时动画又继续。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animation 动画效果</title>
    <style>
        /* 设置动画效果的基本样式 */
        .box-max {
            width: 100px;                  /* 盒子宽度设置为100像素 */
            height: 100px;                 /* 盒子高度设置为100像素 */
            background-image: url('./小蜗牛.jpg'); /* 设置背景图片，确保文件路径和文件名正确 */
            background-size: cover;        /* 背景图片完全覆盖元素，不留空白 */
            border-radius: 50%;            /* 设置边框为圆形 */
            position: relative;            /* 设置为相对定位以使用left和transform属性 */
            animation-name: box4;          /* 引用定义的关键帧动画名称 */
            animation-duration: 4s;        /* 动画持续时间为4秒 */
            animation-timing-function: linear; /* 设置动画速度函数为线性 */
            animation-iteration-count: infinite; /* 动画无限重复播放 */
            animation-direction: alternate; /* 动画每次完成后反向播放 */
            animation-play-state: running; /* 默认动画状态为运行 */
        }

        .box-max:hover {
            animation-play-state: paused; /* 鼠标悬停时暂停动画 */
        }

        /* 定义动画关键帧 */
        @keyframes box4 {
            from {
                left: 0; /* 动画开始时，元素从容器的最左端开始 */
                transform: rotate(0deg); /* 开始时无旋转 */
            }
            to {
                left: calc(100% - 100px); /* 动画结束时，元素移动到右侧，留下元素宽度的空间 */
                transform: rotate(360deg); /* 结束时元素完成一圈（360度）旋转 */
            }
        }
    </style>
</head>
<body>
    <div class="box-max"></div> <!-- 动画作用的元素，显示为一个旋转并左右移动的圆形 -->
</body>
</html>

2.源码7运行效果

（1）、视频效果

鼠标悬停动画暂停,源码7

（2）、截图效果
  • 当鼠标未悬停到圆图片上时，它不断来回滚动
    在这里插入图片描述
  • 当鼠标悬停到图片上时图片停止来回滚动（截图时鼠标消失了，图片中鼠标未显示）。
    在这里插入图片描述

三、结语

动画效果还是很有意思的，增强了网页窗口的交互性。动画效果的简单使用和transition(过渡)的使用方法比较相似。都有设置持续时间和时间段的速度及是否延迟的效果。关于动画播放状态的效果，即开始还是暂停也可以结合js来呈现，后面便慢慢添加相关的知识内容吧。
由于笔者的能力有限，创作的内容有所不足在所难免，也敬请读者包涵和指出，万分感谢！

四、定位日期

2024.5.6；
18:53；

小蜗牛764号
关注
专栏目录
CSS的动画特效（animation）使用方法详细教程
jieweiwujie的博客
09-02 495
CSS的动画特效（animation）使用方法详细教程
css中的animation属性轮播图动画效果
02-26
css中的animation属性轮播图动画效果
超详细 CSS动画-animation
热门推荐
欢迎访问我的主页：https://www.bookbook.cc
03-17 3万+
css3 animation @keyframes
CSS-animation自定义动画【看这一篇就够了！】
zheshiyangyang的博客
09-04 1846
使用@keyframes关键帧来定义动画创建动画的原理是，将一套CSS样式逐渐变化为另一套样式在动画过程中，可以多次更改CSS样式的设定动画执行各阶段时间，可以通过百分比来改变发生的时间，或者通过关键词“from”和“tofrom和to等价于0%和100%，from和0%是动画的开始时间to和100%是动画的结束时间语法@keyframes 动画名 {/* 起始状态 */from { 样式 }/* 结束状态 */to { 样式 }/* 或 */@keyframes 动画名 {
前端学习之CSS动画
qq_52230126的博客
11-02 346
CSS动画相关笔记 1.2D转换–translate translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。 rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。 scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数 skew()方，包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。 skewX(&...
CSS3动画效果
lql_h的博客
04-14 332
动画简介 CSS3提供了类似Flash关键帧控制的动画效果，通过animation属性实现 animation实现动画效果主要由两个部分组成： 1.通过类似Flash动画中的关键帧声明一个动画； 2.在animation属性中调用关键帧声明的动画。 animation-name用来指定一个关键帧动画的名称，这个动画名必须对应一个@keyframes规则。CSS加载时会应用animatio...
如何让CSS动画中途停止并维持姿态
白瑕 的博客
09-24 7777
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码
前端性能优化（CSS动画篇）
Whisper_a的专栏
03-20 804
正巧看到在送书，于是乎找了找自己博客上记录过的一些东西来及其无耻的蹭书了~~~ 小广告：更多内容可以看 我的博客 最近拜读了一下 html5rocks 上几位大神写的一篇关于CSS3动画性能优化的文章，学到了很多，在这里记录一下，其中的知识都是来源于这俩篇文章，我只是截取了其中比较关注的内容出来，原文地址 High Performance Animations 及 Accelera
CSS animation动画使用详解
Gik99的博客
07-12 3651
css之animation动画详解
前端学习之css动画
qq_45839045的博客
01-02 362
在css3中我们可以用动画属性来制作一些简单的特效，包括2d和3d。 不论是2d还是3d的特效我们都可以用transfrom属性来实现。 2d和3d都包含旋转和位移和缩放这三种基本属性。 2d的用法 位移translate transform:translate(X,Y) x表示在水平方向位移的距离，y表示在垂直方向位移的距离。**注意：X轴水平向右为正，向左为负，Y轴垂直向下为正，向上为负；**若取值为百分比，按盒子自身尺寸计算。 旋转rotate transform:rotate(angle(deg))
css中关于animation动画的使用
weixin_70851331的博客
05-12 1388
关于在css中使用动画效果的方法
css3 animation动画制作点击波特效.zip
11-16
本项目“css3 animation动画制作点击波特效.zip”显然是一个关于如何利用CSS3的animation属性来创建点击波纹特效的示例。这种特效常见于按钮或元素被点击时，呈现出一种向外扩散的涟漪效果，增强了用户的交互体验。 ...
CSS3 Animation文字动画特效.zip
07-11
在IT领域，CSS3 Animation是一种强大的技术，用于创建动态、交互式的网页元素，尤其是文字动画特效。...无论是初学者还是经验丰富的前端工程师，都可以从中学习到如何有效地利用CSS3 Animation来提升网站的设计水平。
css动画animation属性
AiHongHong_的博客
12-05 1501
IE 10和Firefox（>= 16）支持没有前缀的animation，firefox（
CSS3动画Animation的八大属性
Summer_water的博客
06-09 3122
CSS3 动画Animation的8大属性animation复合属性。检索或设置对象所应用的动画特效。 如果有多个属性值时以”，”隔开，适用于所有元素，包含伪对象:after和:before1.animation-name 检索或设置对象所应用的动画名称必须与规则@keyframes配合使用，eg:@keyframes animations animation-name:animations;
CSS3中animation属性的使用
whaxrl的专栏
02-19 1314
 一、animation基本用法 animation: name duration timing-function delay iteration-count direction fill-mode;   二、animation属性参数说明   1、name (animation-name) 动画的名字，即设定动画过程的名字，CSS3采用“关键帧 keyframes”来定义动画，
CSS——动画（animation）
Fan_web的博客
08-15 1172
本文主要分享了CSS中的过渡、动画、变形、旋转、缩放等的样式的语法内容。下一篇将分享到CSS的less知识。
前端——css动画
最新发布
qq_53256193的博客
09-29 918
keyframes +自定义动画名字0%-100% 就是动画的开始到结束 帧数 ——from to0% {20% {30% {100% {或者from {20% {30% {to {
07前端核心技术-CSS动画
weixin_43624810的博客
03-13 531
目录 CSS3 过渡transition CSS3 转换transform 2D 转换 3D转换 CSS3 动画 animation-timing-function animation-fill-mode animation-direction 属性 animation-play-state 属性 CSS3 渐变（Gradients） 线性渐变 CSS3 媒体查询 常用尺寸 动画插件 CSS3 过渡transition 过渡属性 属性 描述 transiti.
前端中animation动画
04-26
有哪些常用的属性和值？ 在前端中，animation动画通常通过CSS的@keyframes规则来定义。常用的属性和值有： 1. animation-name：指定要使用的关键帧名称； 2. animation-duration：指定动画持续的时间； 3. animation-timing-function：指定动画效果的时间曲线； 4. animation-delay：指定动画延迟启动的时间； 5. animation-iteration-count：指定动画重复的次数； 6. animation-direction：指定动画重复的方向； 7. animation-fill-mode：指定动画在启动前和结束后如何填充； 8. animation-play-state：指定动画是否正在运行或已暂停。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值