一篇文章带您学会CSS的动画

最新推荐文章于 2024-07-29 14:14:21 发布
最新推荐文章于 2024-07-29 14:14:21 发布
阅读量574 收藏 8
点赞数 5
分类专栏： 前端开发 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_54454406/article/details/138012636
版权

动画和过渡的区别

过渡：实现两个状态间的变化过程。

动画：实现多个状态间的变化过程。动画过程可控（重复播放，最终动画，是否暂停）

动画的实现步骤

1.定义动画

书写格式

@keyframes 动画名称{
	from{}
	to{}
}

2.使用格式

书写格式

animation:动画名称 动画花费的时间;

完整的书写格式

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

说明：动画名称和动画时长必须赋值，取值不分先后顺序 ， 第一个时间表示动画时长，第二个时间表示延迟时间。

动画属性说明：

属性作用取值
animation-name动画名称
animation-duration动画时长
animation-delay延迟时间
animation-fill-mode动画执行完毕时状态forwards:最后一帧状态。backwards：第一帧状态
animation-timing-function速度曲线steps（数字）：逐帧动画
animation-iteration-count重复次数infinite 为无限循环
animation-direction动画执行方向alternate为反复
animation-play-state暂停动画paused为暂停，通常配合:hover一起使用

动画体验

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>
        /* 定义动画 */
        @keyframes ani {
            form{
                background-color: red;
            }
            to{
                background-color: blue;
            }
        }
        /* 使用动画 */
        div {
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            margin: 100px auto;
            /*它变化颜色不是一下就过了，而是有一个过渡，我们称之为补帧动画*/
            animation: ani 10s;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">

<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>Document</title>
    <style>
        @keyframes ani {
            0% {
                background-color: red;
                transform: scale(1.1);
            }

            1% {
                background-color: rgb(65, 46, 46);
                transform: scale(1.5);
            }

            9% {
                background-color: rgb(169, 227, 36);
                transform: scale(2);
            }

            20% {
                background-color: rgb(10, 223, 155);
                transform: scale(2.2);
            }

            30% {
                background-color: rgb(10, 223, 155);
                transform: scale(2.2);
            }

            50% {
                background-color: aquamarine;
                transform: scale(0.5);
            }

            80% {
                background-color: rgb(85, 18, 218);
                transform: scale(0.1);
            }

            90% {
                background-color: rgb(255, 2, 204);
                transform: scale(0.9);
            }

            100% {
                background-color: rgb(253, 0, 0);
                transform: scale(1);
            }
        }

        div {
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            margin: 100px auto;
            animation: ani 20s;
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>

3.animation-delay 延迟

在动画里面，让一下元素慢一点执行动画。

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
    <style>
        .box {
            display: flex;
            justify-content: space-evenly;
            align-items: end;
            width: 1200px;
            height: 600px;
            margin: 0 auto;
            border: 1px solid #000;
        }

        .box .son {
            width: 50px;
            height: 50px;
            border-radius: 50px;
            background-color: aqua;
            animation-name: mover;
            animation-duration: 30s;
        }

        .box:nth-child(1) {
            animation-delay: 10s;
        }

        .box:nth-child(2) {
            animation-delay: 10s;
        }

        .box:nth-child(3) {
            animation-delay: 20s;
        }

        @keyframes mover {
            0% {
                background-color: antiquewhite;
                transform: translateY(-200px);
            }

            10% {
                background-color: rgb(255, 145, 1);
                transform: translateY(-150px);
            }

            20% {
                background-color: rgb(156, 253, 0);
                transform: translateY(-100px);
            }

            30% {
                background-color: rgb(0, 255, 85);
                transform: translateY(-50px);
            }

            40% {
                background-color: rgb(0, 217, 255);
                transform: translateY(0px);
            }

            50% {
                background-color: rgb(0, 0, 255);
                transform: translateY(-150px);
            }

            60% {
                background-color: rgb(166, 0, 255);
                transform: translateY(-200px);
            }

            70% {
                background-color: rgb(255, 0, 195);
                transform: translateY(-250px);
            }

            80% {
                background-color: rgb(255, 0, 64);
                transform: translateY(-180px);
            }

            90% {
                background-color: rgb(17, 52, 24);
                transform: translateY(-100px);
            }

            100% {
                background-color: rgb(7, 255, 57);
                transform: translateY(0px);
            }
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
    </div>
</body>

</html>

4.animation-fill-mode 动画执行完毕时状态

属性值：

forwards:动画结束后，状态停止在最后一帧。

backwards：动画结束后，状态固定在第一帧。

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
    <style>
        @keyframes move {
            0% {
                transform: translateX(400px);
                background-color: aqua;
            }

            10% {
                transform: translateX(410px);
                background-color: aquamarine;
            }

            20% {
                transform: translateX(450px);
                background-color: rgb(0, 94, 255);
            }

            50% {
                transform: translateX(400px);
                background-color: rgb(255, 89, 0);
            }

            70% {
                transform: translateX(200px);
                background-color: rgb(179, 255, 0);
            }

            90% {
                transform: translateX(50px);
                background-color: rgb(0, 255, 64);
            }

            100% {
                transform: translateX(0px);
                background-color: rgb(255, 0, 111);
            }
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
            animation-name: move;
            animation-duration: 10s;
            /* 
            forwards:动画结束后，状态停止在最后一帧。
            backwards：动画结束后，状态固定在第一帧。
            */
            animation-fill-mode: backwards;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

5.animation-timing-function 速度曲线

steps（数字）：逐帧动画

默认的速度曲线：慢快满

linear：匀速

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>
        @keyframes move {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(1000px);
            }
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: blue;
            animation-name: move;
            animation-duration: 6s;
        }
        .box:nth-child(2) {
            /*linear:匀速*/
            animation-timing-function: linear;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>
        @keyframes move {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(1000px);
            }
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: blue;
            animation-name: move;
            animation-duration: 6s;
        }
        .box:nth-child(2) {
            animation-timing-function: linear;
        }

        
        .box:nth-child(3) {
            animation-timing-function: steps(8);
        }
        
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</body>
</html>

6.animation-iteration-count 重复次数

infinite 为无限循环

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
    <style>
        @keyframes move {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(1000px);
            }
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: blue;
            animation-name: move;
            animation-duration: 6s;
            /* 重复播放 */
            animation-iteration-count: infinite;
        }

        .box:nth-child(2) {
            animation-timing-function: linear;
        }


        .box:nth-child(3) {
            animation-timing-function: steps(8);
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</body>

</html>

7.animation-direction 动画执行方向

alternate：反复

reverse:反向

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
    <style>
        @keyframes move {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(1000px);
            }
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: blue;
            animation-name: move;
            animation-duration: 6s;
            /* 重复播放 */
            animation-iteration-count: infinite;
            /* 下一次播放就会反着来 */
            animation-direction: alternate;
        }

        .box:nth-child(2) {
            animation-timing-function: linear;
        }


        .box:nth-child(3) {
            animation-timing-function: steps(8);
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</body>

</html>

8.animation-play-state 暂停动画

paused为暂停，通常配合:hover一起使用。

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: red;
            animation-name: move;
            animation-duration:2s ;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }
        .box:hover {
            /* 鼠标经过的时候暂停 */
            animation-play-state: paused;
        }
        @keyframes move {
            0% {
                transform: translateY(0);
            }
            100% {
                transform: translateY(300px);
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

注意：本文章是笔者的学习笔记，因为笔者的能力有限，会出现很多没有想过的问题，所以，如果您在浏览或者运行代码的时候出现问题，请在评论区留言，笔者看到后会在第一时间处理，谢谢。

与风过山岗
关注
专栏目录
CSS样式 JS特效 Java小工具 文学文档 Java插件 截图软件
03-23
在描述中提到了一个博文链接，虽然没有具体内容，但我们可以猜测这篇文章可能涉及了使用CSS和JavaScript进行网页设计和开发的经验分享，或者是介绍了一些Java小工具的使用方法。 标签"源码"表明资源可能包含了这些...
深入浅出 CSS 动画
前端开发博客
05-21 2万+
关注公众号前端开发博客，领27本电子书回复加群，自助秒进前端群本文将比较全面细致的梳理一下 CSS 动画的方方面面，针对每个属性用法的讲解及进阶用法的示意，希望能成为一个比较好的从入门到进阶的教程。CSS 动画介绍及语法首先，我们来简单介绍一下 CSS 动画。最新版本的 CSS 动画由规范 -- CSS Animations Level 1[1] 定义。CSS 动画用于...
CSS动画实现的三种方式
m0_46966817的博客
04-11 246
1. transition 过渡。2. transform 变形。3. animation 关键帧动画。
【css】css动画实现的3种方式
t13965688123的博客
05-25 1万+
css实现动画主要有3种方式，①、transition实现过渡动画，②、transform转变动画，③、animation实现自定义动画。
CSS动画入门：新手小白也能轻松掌握的全面教程
艾恩小灰灰的博客
04-10 1050
CSS动画为网页设计带来了生动活泼的动态效果，使网站更具吸引力和互动性。对于初学者来说，虽然CSS动画看似复杂，但其实只要理解其基本原理和关键语法，就能轻松创建出令人眼前一亮的动画效果。本文将带领新手小白和编程新手逐步了解CSS动画的核心概念，通过实例代码和详细注释，让您快速掌握CSS动画的制作技巧。
css实现动画的三种方式
learningJS的博客
05-01 4093
css实现动画主要有3种方式，第一种是：transition实现渐变动画，第二种是：transform转变动画，第三种是：animation实现自定义动画 transition渐变动画（过渡） 语法格式：transition：要过渡的属性 花费的时间 运动曲线 何时开始; 属性：想要变化的CSS属性，宽度高度，背景颜色，内外边距都可以。如果想要所有的属性都变化过渡，写一个all就可以 花费时间：单位是秒（必须写单位）比如0.5s 运动曲线：默认是ease（可以省略) 何时开始：单位是秒 (必须写
HTML5七夕情人节表白网页制作【一生守护】HTML+CSS+JavaScript
08-10
通过本篇文章的学习，我们了解了HTML5七夕情人节表白网页的设计理念与实现方式，掌握了网页布局与设计的关键要素，学会了如何有效地运用多媒体元素，以及如何选择合适的HTML编辑工具进行开发，并讨论了网页作品的...
084 压力容器大屏.rar
03-17
本篇文章将详细解读一个名为"084 压力容器大屏.rar"的前端数据可视化大屏模板，它包含了丰富的HTML、CSS、JavaScript代码，以及Echarts图表库的应用，旨在帮助开发者快速构建类似的大屏展示。 首先，我们要理解大屏...
jQuery带留言表情仿多说网评论框特效源码.zip
11-17
本篇文章将详细解析基于jQuery实现的仿多说网评论框特效源码，帮助读者理解并掌握如何在自己的网站上实现类似的功能。 首先，我们来看jQuery的核心作用。jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档...
超硬核，css动画详细讲解
最新发布
xiaowei0016的博客
07-29 1281
使用@keyframes规则定义动画的关键帧。关键帧描述了动画在不同时间点的样式。from {/* 动画开始时的样式 */to {/* 动画结束时的样式 */​0% {/* 动画开始时的样式 */50% {/* 动画中间的样式 */100% {/* 动画结束时的样式 */​。
关于css 动画样式的教学
weixin_73032215的博客
02-21 385
通过这篇高级教程，你学会了如何利用CSS动画属性创建复杂的动画效果。不断实践和尝试新的技术，你将能够设计出更加炫目和吸引眼球的动画效果。祝你在CSS动画的世界里创造出令人惊叹的作品！
CSS 动画：基础知识与性能优化
薛定谔的猫-前端领域
05-13 2428
理论上说，FPS 越高，动画会越流畅，目前大多数设备的屏幕刷新率为 60 次/秒，所以通常来讲 FPS 为 60frame/s 时动画效果最好，也就是每帧的消耗时间（帧预算）为 16.67ms，但实际上，浏览器有整理工作要做，因此所有工作需要尽量在 10 ms 内完成。而且新的智能手机有 90Hz 的屏幕而 iPad Pro 的屏幕是 120Hz 的，这会让帧预算分别减少到 11.1ms 和 8.3ms。
CSS系列之动画
老__L的博客
02-27 7773
本文主要介绍CSS的animation、animation-delay、animation-direction、animation-duration、animation-fill-mode、animation-iteration-count、animation-name、animation-play-state、animation-timing-function、@keyframes属性。 动画是CSS3中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果。
CSS的动画效果的实现
weixin_53598426的博客
05-24 788
本章主要分享了过渡属性与动画属性的使用，以及利用动画属性实现动态环绕
CSS基础学习——动画
qq_41890177的博客
08-26 1万+
一、CSS3 2D变形（利用Transfrom方法） 1、rotate（angle） 元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> div{ width: 100px
CSS动画（快速入门）
weixin_46127956的博客
11-12 682
CSS动画（快速入门）
动画学习之Animate.css的使用与解析
热门推荐
沉淀
07-30 3万+
近况近期生活比较单一。 const 提升自己 = true; while( 提升自己 ) { 写码 ... 看书 ... 思考 ... 睡觉 }既单一也充实，单一使我平静，充实使我保持向上的感觉，希望自己真难做到“持续学习，保持思考，不断进步”。最近看到腾讯ISUX团
CSS中的动画的学习总结
keket1的博客
06-23 227
CSS中的动画的学习总结
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

与风过山岗

您的鼓励是我莫大的荣幸

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值