CSS3之动画效果（面试常问知识点）

最新推荐文章于 2024-07-08 17:07:45 发布

ItDaChuang

最新推荐文章于 2024-07-08 17:07:45 发布

阅读量976

点赞数

分类专栏：前端 # CSS3 文章标签： css3 动画面试

本文链接：https://blog.csdn.net/ItDaChuang/article/details/120500499

版权

前端同时被 2 个专栏收录

43 篇文章

订阅专栏

CSS3

4 篇文章

订阅专栏

本文详细介绍了CSS3动画的原理和使用，包括动画与过渡的区别、动画的基本使用步骤、动画属性的设置以及动画案例分析，如城市热点图、打字机效果和奔跑的小熊。通过实例展示了如何利用@keyframes定义动画序列，以及如何通过animation属性调用和控制动画。此外，还提供了打字机效果和白熊奔跑的代码示例，帮助读者深入理解CSS3动画的运用。

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

CSS3 动画

看看下面的效果，你可以用 css 动画制作出来吗？

城市热点图

打字机效果

奔跑的小熊

不知道就赶紧看看下面关于 CSS3 的动画介绍吧！一次学会 CSS3 动画。

动画（animation）是 CSS3 中重要的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。与过渡的区别：

过渡（transition）：简单的动画，需要鼠标进过等事件才能动

动画（animation）：复杂的动画，可以自己动，能自动播放有更多的控制。

一、动画的基本使用

制作动画分两步：

先定义动画
使用（调用）动画

用 @keyframes 定义动画序列（类似定义类选择器）

@keyframes run {	/* 也可使用关键字 "from" 和 "to"（代表 0％（开始）和 100％（完成））*/
    0%{      /* 开始状态 */

    }
    100%{      /* 结束状态 */

    }
}

二、动画属性调用

animation：设置所有动画属性的简写属性。

至少要有动画名称和动画持续时间。
animation-name: 动画名称【必须属性】
animation-duration: 动画持续时间【必须属性】

以秒或毫秒计，默认值为0s，即不播放动画。
animation-timing-function: 规定动画的速度曲线。

ease - （默认）指定从慢速开始，然后加快，然后缓慢结束的动画。

linear - 规定从开始到结束的速度相同的动画（匀速）。

ease-in - 规定慢速开始的动画。

ease-out - 规定慢速结束的动画。

ease-in-out - 指定开始和结束较慢的动画。

steps(int,start|end) - 在动画持续时间里分几步来完成动画。有两个参数，第一个参数指定运动的步数，该参数是一个正整数（大于 0）。第二个参数是可选的，表示动画是从时间段的开头连续还是末尾连续。含义分别如下：
- start：表示直接开始。
- end：默认值，表示戛然而止。
cubic-bezier(n,n,n,n) - 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
animation-delay: 规定在动画开始之前的延迟。
animation-iteration-count: 规定动画应该播放的次数。

n - 一个数字，定义动画播放的次数，默认为1。

infinite - 指定动画无限次播放。
animation-direction: 规定是否应该轮流反向播放动画。

normal - 动画正常播放（向前）。默认值

reverse - 动画以反方向播放（向后）。

alternate - 动画先向前播放，然后向后。

alternate-reverse - 动画先向后播放，然后向前。
animation-fill-mode：规定元素在不播放动画时的样式（在开始前、结束后，或两者同时）。

none - （默认值）动画在动画执行之前和之后不会应用任何样式到目标元素。

forwards - 调用动画的元素在动画结束后停在动画结束后的状态。

backwards - 动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。

both - 动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。

initial - 设置该属性为它的默认值。请参阅 initial。

inherit - 从父元素继承该属性。请参阅 inherit。
animation-play-state：规定动画是运行还是暂停。

running - （默认值）指定动画运行

paused - 指定动画暂停

制作页面一打开，一个盒子反复从左上边和右下边间来回匀速运动

<style>
   @keyframes run {
       0%{
            transform: translate(0px,0px);		/* 开始位置 */	
       }
       100%{
            transform: translate(200px,200px);	/* 结束位置 */
       }
   }
   div{
       width: 100px;
       height: 100px;
        border-radius: 50%;
       background-color: red;
       animation-name: run;                 /* 运动动画名称 */
       animation-duration: 1s;              /* 运动持续时间1s */
       animation-iteration-count:infinite;  /* 运动无限次 */
       animation-direction: alternate;      /* 先正向运动，后反向运动 */
       animation-timing-function: linear;   /* 匀速运动 */
   }
</style>
<body>
    <div></div>
</body>

动画序列里的百分比可以写个阶段，从0%到100%之间即可，表示运动到相应的状态花费总的动画时间的占比。

三、动画简写属性

animation: 动画名称持续时间运动曲线延时开始播放次数是否反方向动画结束状态

简写属性中没有 animation-play-state 。

四、动画案例

热点图案例: 地图图片

<body>				<!-- html -->
    <div class="map">
        <div class="city">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
        <div class="city tb">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
</body>

<style>			/* css */
    body {
        background-color: #333;
    }
    .map {
        position: relative;
        width: 747px;
        height: 616px;
        background: url(./images/map.png) no-repeat;
        margin: 0 auto;
    }
    .city {
        position: absolute;
        top: 227px;
        right: 193px;
        color: #fff;
    }
    .dotted {
        width: 8px;
        height: 8px;
        background-color: #09f;
        border-radius: 50%;
    }
    .city div[class^="pulse"] {
        position: absolute;
        /* 下面三行保证在父盒子中间 */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 8px;
        height: 8px;
        box-shadow: 0 0 12px #009dfd;
        border-radius: 50%;
        animation: pulse 1.2s linear infinite;
    }
    .city div.pulse2 {
        animation-delay: 0.4s;
    }
    .city div.pulse3 {
        animation-delay: 0.8s;
    }
    @keyframes pulse {
        0% {}
        70% {
            width: 40px;
            height: 40px;
            opacity: 1;		/* 透明度 */
        }
        100% {
            width: 70px;
            height: 70px;
            opacity: 0;
        }
    }
</style>

打字机效果：利用速度曲线属性中的 step() 函数实现

<style>		/* css */
    div{
        overflow: hidden;
        font-size: 20px;
        white-space: nowrap;	/* 文字一行显示 */
        animation: w 3s steps(10) forwards infinite;
    }
    @keyframes w {
        0%{
            height: 30px;
            width: 0px;}
        100%{
            height: 30px;
            width: 200px;
        }
    }
</style>
<body>		<!-- html -->	
    <div>在这里演示打字机效果</div>
</body>

白熊奔跑：白熊从左边跑到中间，再原地跑。还是利用 step() 和图片制作白熊图片

<style>         /* css */
    body {
        background-color: #A6A5A5;
    }
    div{
        position: absolute;
       width: 200px;
       height: 100px;
       background: url(./images/bear.png);
        /* 两种动画可以同时播放，用逗号隔开 */
       animation: run 1s steps(8) infinite, move 3s linear forwards;
    }
    @keyframes run {
        0%{
            background-position: 0 0;
        }
        100%{
            background-position: -1600px 0;
        }
    }
    @keyframes move {
        0%{
            top: 0;
            left: 0;
        }
        100%{
            top: 0;
            left: 50%;
            transform: translate(-50%,0);
        }
    }
</style>
<body>      <!-- html -->
    <div></div>
</body>