• HTML Animation 【前端就业课 第二阶段】CSS 零基础到实战（06）

    若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我，若你是真心学习可以送你书籍，指导你学习，给予你目标方向的学习路线，无套路，博客为证。

    一、Animation 基础

    使用 Animation 可以设置帧动画，与 transition 区别于 transition 需要有状态对齐变换效果进行激活，而 Animation 则不用，并且 Animation 可以设置多个时间段的关键帧状态，但 transition 只有起始与最终的两个状态。

    Animation 使用 @keyframes 定义其动画的关键帧内容，例如在其状态中的 1% 位置当前动画是什么状态，又或者 10%、30%以及100%最终状态如何，我们以下使用一个示例来说明：

    <style>
@keyframes move {
    0%{
	    top:0px;
	    left: 0px;
    }
    30%{
	    top:100px;
	    left: 300px;
    }
    60%{
	    top:900px;
	    left: 10px;
    }
    100%{
	    top:0px;
	    left: 0px;
    }
}
style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    以上示例中，@keyframes 为定义关键帧的“关键字”，而 move 为当前关键帧的名称，其花括号内为当前 move 的关键帧详情内容；其中 0%{top:0px;left: 0px;} 表示在 0%（状态最初时）关键帧的状态是距离 top 为 0px，left 左部 0px，随后这个动画运行到 30% 状态后的位置信息，接下来是 60% 以及 100%。

    接着我们添加一个 div 样式示例：

    <style>
.box{
    width: 100px;
    height: 100px;
    background: #ff000d;
    animation:move 10s;
}
style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    以上示例中，主要查看 animation，我们从以上样式中可以得知，animation 需要在定位布局中进行展示；animation:move 10s; 中得知，animation 是设置这个 div 的animation 属性，animation 属性可以设置两个值（暂时），一个是 move 表示需要使用到的关键帧，而 10s 是一个秒数单位，表示这个动画移动完成需要的时间数，最终我们运行如下代码：

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Animation 帧动画 ——1bit 的前端课程title>
    <style>
        @keyframes move {
		    0%{
			    top:0px;
			    left: 0px;
		    }
		    30%{
			    top:100px;
			    left: 300px;
		    }
		    60%{
			    top:900px;
			    left: 10px;
		    }
		    100%{
			    top:0px;
			    left: 0px;
		    }
		}
        .box{
            width: 100px;
            height: 100px;
            background: #ff000d;
            animation:move 10s;
        }
        
    style>
head>
<body>
    <div class="box">div>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37

    效果如下：请添加图片描述

    animation 的关键帧还有一种写法，如下示例，直接设置起始和结束并没有设置多余的关键帧位置，其中 form 表示 0% 而 to 表示 100%：

    <style>
@keyframes move {
    from {
        top:0px;left: 0px;
    }
    to {
        top:100px;left: 300px;
    }
}
style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    我们还可以更改更多的内容让其实现动画，查看以下示例：

    <style>
    @keyframes move {
        0%{
            top:0px;
            left: 0px;
            background: #ff000d;
        }
        30%{
            top:100px;
            left: 300px;
            width:300px;
            background: #00ffaa;
        }
        60%{
            top:300px;
            left: 10px;
            background: #0059ff;
        }
        100%{
            top:0px;
            left: 0px;
            height:600px;
            background: #ff4800;
        }
    }
    .box{
         width: 100px;
         height: 100px;
         background: #ff000d;
         transition:all 2s;
         animation:move 10s 3;
     }
style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33

    我们此时还需要查看 animation:move 10s 3;，其中这个数字 3 指的就是动画重复次数，若你想使其一直重复运行，将数字 3 改成 infinite 即可，效果如下：

    请添加图片描述
    若想使其速度是线性匀速，将 animation:move 10s 3; 改成 animation:move 10s infinite linear; 即可。

    此时我们发现，该帧动画在最后一帧跳到第一帧时，动画效果太过突兀，咱们可以增加 alternate 值，这是一个交替动画，注意是交替动画，即 animation:move 10s infinite linear alternate;，效果如下：
    请添加图片描述

  • 相关阅读:
    使用 `spring-statemachine-redis` 实现状态机
    【数学】焦点弦定理（？）
    Cooking Casual -A Chef‘s Game
    Gitter+Sidecar制作聊天室
    java+jsp基于ssm矿场仓储管理系统-计算机毕业设计
    利用腾讯的词向量模型使用Python进行faiss检索
    2024生物发酵产品与技术装备展的创新魅力-东特科技
    高效MMdetection(3.1.0)环境安装和训练自己数据集教程(实现于Linux(ubuntu)，可在windows尝试)
    详解Leetcode中关于malloc模拟开辟二维数组问题，涉及二维数组的题目所给函数中的各个参数的解读
    KINODYNAMIC-路径规划
  • 原文地址：https://blog.csdn.net/A757291228/article/details/123928923