css动画效果-animation

黄昏终结者

已于 2022-08-27 09:06:18 修改

阅读量4k

点赞数 5

文章标签：前端

于 2022-04-23 12:45:00 首次发布

本文链接：https://blog.csdn.net/m0_62181310/article/details/124325013

版权

一、定义动画

示例：第一种写法。

@keyframes{

from{}

to{}

}

示例：第二种写法。

@keyframes{

0%{}

20%{}

50%{}

100%{}

}

代码如下：

<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>动画</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: pink;

            animation: change 1s;
        }

        @keyframes change {
            0% {
                width: 200px;
            }
            50% {
                width: 500px;
                height: 300px;
            }
            100% {
                width: 800px;
                height: 500px;
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

这里对以上代码进行效果展示：

二、复合属性

1.animation语法使用

animation: 动画名称动画时长速度曲线延迟时间重复次数动画方向执行完毕状态;

提示：取值不分先后顺序

必须赋值项:

动画名称和动画时长
若出现2个时间:第一个时间为动画时长,第二个时间为延迟时间

2.动画拆分写法:

动画使用方式:

/* linear:匀速 */
animation: change 1s linear;

/* steps(4):分步动画 */
animation: change 1s steps(4);

/* 2s:延迟时间 */
animation: change 1s 2s;

/* infinite:无限循环,数字:表示重复的次数 */
animation: change 1s infinite;
animation: change 1s 3s;

/* alternate:反向 */
animation: change 1s infinite alternate;

/* backwards默认值,动画停留在开始状态 */
animation: change 1s backwards;

/*forwards: 动画停留在结束状态 */
animation: change 1s forwards;

三、逐帧动画

steps语法使用

steps实现逐帧动画的使用。

animation-timing-function 速度曲线 steps(数字)：逐帧动画

作用:精灵动画 (搭配精灵图使用)

代码如下（示例）：

animation-timing-function: steps(N)；

注意：动画速度曲线为steps(N) , N与精灵图小图个数相同

四、多组动画

animation属性给一个元素添加多个动画效果

写法:

animation:

动画1,

动画2,

动画N

;

黄昏终结者

关注

5
点赞
踩
26

收藏

觉得还不错? 一键收藏
打赏
0
评论
css动画效果-animation

目录一、定义动画二、复合属性1.animation语法使用2.动画拆分写法:三、逐帧动画steps语法使用四、多组动画animation属性给一个元素添加多个动画效果本文介绍了使用关键帧动画效果,给网页元素添加动画特效的基础内容,使用animation给网页添加动画效果。一、定义动画示例：第一种写法。@keyframes{ from{} to{} }示例：第二种写法。@keyframes{ 0%{} ......
复制链接

扫一扫