当前位置： 首页 > news >正文

CSS3动画

news 2026/2/12 6:00:12

在CSS3中新增了一个很有意思的东西，那就是动画，有了动画我们可以做很多的事情，让我为大家介绍一下动画吧！
本篇文章关于介绍动画，利用小球移动为你们介绍一下动画
默认样式：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>动画</title><style>* {margin: 0;padding: 0;}.box {/* 绝对定位,子绝父相 */position: relative;width: 1000px;height: 100px;border: 1px solid black;margin: 100px auto;}.ball {width: 100px;height: 100px;border-radius: 50%;background-color: pink;/* 绝对定位,接下来用定位来实现移动 */position: absolute;top: 0;left: 0;}</style>
</head>
<body><div class="box"><!-- 小球 --><div class="ball"></div></div>
</body>
</html>

在我们使用动画前，我们需要定义关键帧，使用的语法：
@keyframes 名称 { }

        /* 定义关键帧 */@keyframes move {/* 第一种方法,from to *//* from {left:0;}to {left: 900px;} *//* 第二种方法,百分比的形式 *//* 0% {left:0;}100%{left: 900px;} */}

动画的使用语法与含义：

语法含义
animation-name指定要绑定到选择器的关键帧的名称
animation-duration动画指定需要多少秒或毫秒完成
animation-timing-function设置动画将如何完成一个周期
animation-delay设置动画在启动前的延迟间隔
animation-iteration-count定义动画的播放次数
animation-direction指定是否应该轮流反向播放动画
animation-fill-mode规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式
animation-play-state指定动画是否正在运行或已暂停

使用动画让小球动起来

        /* 给小球定义关键帧 */@keyframes move {0% {left:0;}100%{left: 900px;}}

跟着这一步步来自己动手试试吧，看只能看的懂理论，还是得要实践

一、animation-name

我们把名称给到我们小球的选择器当中

animation-name: move;

定义了动画名称还是做不出效果的所以我们用到了animation-duration

二、 animation-duration

动画指定需要多少秒或毫秒完成
单位使用s(秒)

animation-duration: 2s;

请添加图片描述

这样我们的小球就移动起来了，不过会有一个问题，但我们打开页面或者刷新页面的时候，动画就已经执行起来了，会闪现一段路程，所以我们要使用到延迟时间animation-delay

三、animation-delay

我们给小球添加延迟时间

/* 延迟2秒开始，单位用s */
animation-delay: 2s;

请添加图片描述

这样就解决了当我们页面还没加载完就开始执行了动画

四、animation-timing-function

是不是在尝试的过程中感觉小球滚动的速度有点奇特，一下慢一下快又一下慢的，这是animation-timing-function的属性值导致的，默认值是ease

属性值简述
ease 默认动画以低速开始，然后加快，在结束前变慢
ease-in动画以低速开始
ease-out动画以低速结束
ease-in-out动画以低速开始和结束
linear(常用)动画从头到尾的速度是相同的(匀速)
steps指定了时间函数中的间隔数量( 步长 )

演示效果：
请添加图片描述

我们把小球的速度改成匀速

animation-timing-function: linear;

请添加图片描述

五、animation-iteration-count

定义动画播放的次数
可以使用number数字
我们想让动画执行2次

animation-iteration-count: 2;

在这当中我们有一个十分常用的属性
infinite(无限的)
这个属性可以反复执行动画

animation-iteration-count: infinite;

六、animation-direction

动画播放的方向

属性值简述
normal 默认值动画按正常播放
reverse动画反向播放
alternate动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放
alternate-reverse动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放

在使用alternate与alternate-reverse之前，我们需要让动画无限的播放或者是播放2次以上

animation-direction:alternate;

请添加图片描述

七、animation-fill-mode

属性简述
backwards动画执行完毕后回到最初的位置
forwards动画执行完毕后停在最后一帧不动
animation-fill-mode: forwards;

请添加图片描述

八、animation-play-state

指定动画是否正在运行或已暂停
我用:hover为大家演示一下，不和其他属性一样写在一起

.ball:hover {animation-play-state: paused;
}

注意看鼠标
请添加图片描述

代码总结：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>动画</title><style>* {margin: 0;padding: 0;}.box {/* 绝对定位,子绝父相 */position: relative;width: 1000px;height: 100px;border: 1px solid black;margin: 100px auto;}.ball {/* 绝对定位,接下来用定位来实现移动 */position: absolute;top: 0;left: 0;width: 100px;height: 100px;border-radius: 50%;background-color: pink;/* 动画名称 */animation-name: move;/* 所需时间 */animation-duration: 2s;/* 延迟时间 */animation-delay: 2s;/* 运动曲线 */animation-timing-function: linear;/* 定义动画播放的次数 */animation-iteration-count: infinite;/* 动画播放方向 *//* animation-direction:alternate; *//* 最后一帧停止不动 *//* animation-fill-mode: forwards; */}/* 鼠标经过小球停止，移出继续动 */.ball:hover {animation-play-state: paused;}/* 给小球定义关键帧 */@keyframes move {0% {left: 0;}100% {left: 900px;}}</style>
</head>
<body><div class="box"><!-- 小球 --><div class="ball"></div></div>
</body>
</html>

九、复合属性(常用)

我们可以直接使用animation
animation: 动画的名称 时间 运动曲线 开始时间 播放次数 是否反向播放 是否运用结束的样式 动画是否运行或暂停;

复合属性简写：

/* 要使用到forwards需要不无限循环 */
animation: move 2s 2s linear infinite alternate;

感谢大家的阅读，本人文笔有限，如有错误的地方，可以向我指出，感谢大家！

相关文章：

CSS3动画

在CSS3中新增了一个很有意思的东西&#xff0c;那就是动画&#xff0c;有了动画我们可以做很多的事情&#xff0c;让我为大家介绍一下动画吧&#xff01; 本篇文章关于介绍动画&#xff0c;利用小球移动为你们介绍一下动画 默认样式&#xff1a; <!DOCTYPE html> <ht…...

编程日记 2023/11/23 23:49:16

黑马点评-10实现用户点赞和点赞排行榜功能

用户点赞功能 如果用户只要点赞一次就对数据库中blog表中的liked字段的值加1就会导致一个用户无限点赞 PutMapping("/like/{id}") public Result likeBlog(PathVariable("id") Long id) {// 修改点赞数量,update tb_blog set liked liked 1 where id …...

编程日记 2023/11/23 23:48:15

Spring配置其他注解Spring注解的解析原理

Spring配置其他注解 Primary注解用于标注相同类型的Bean优先被使用权&#xff0c;Primary是Spring 3.0引入的&#xff0c;与Component和Bean一起使用&#xff0c;标注该Bean的优先级更高&#xff0c;则在通过类型获取Bean或通过Autowired根据类型进行注入时&#xff0c;会选用优…...

编程日记 2023/11/23 23:47:14

TypeScript 学习笔记 第一部分 语法基础

【视频链接】尚硅谷TypeScript教程&#xff08;李立超老师TS新课&#xff09; TypeScript 1. 类型1.1 | 联合类型1.2 字面量类型1.3 any 任意类型1.4 unkown 类型1.5 as 类型断言1.6 object 对象类型1.7 { } 对象类型1.8 &#xff1f; 对象中的可选属性1.9 对象中的任意属性1.1…...

编程日记 2023/11/23 23:46:14

【element优化经验】怎么让element-ui中表单多语言切换排版不乱

目录 前言&#xff1a; 痛点&#xff1a; 1.左对齐&#xff0c;右对齐在中文和外语情况下字数不同&#xff0c;固定宽度会使名称换行&#xff0c;不在整行对齐&#xff0c;影响美观。 2.如果名称和输入框不在一行&#xff0c;会使页面越来越长 3.label-width值给变量&#…...

编程日记 2023/11/23 23:45:12

软件设计中如何画各类图之一实体关系图（ER图）：数据库设计与分析的核心工具

目录 1 前言2 符号及作用&#xff1a;3 绘制清晰的ER图步骤4 实体关系图的用途5 使用场景6 实际应用场景举例7 结语 1 前言 当谈到数据库设计与分析的核心工具时&#xff0c;实体关系图&#xff08;ER图&#xff09;无疑是其中最重要的一环。在软件开发、信息管理以及数据库设…...

编程日记 2023/11/23 23:44:10

【神印王座】龙皓晨美妆胜过月夜，魔神皇识破无视，撮合月夜阿宝

Hello,小伙伴们&#xff0c;我是拾荒君。 《神印王座》国漫第82集已更新&#xff0c;拾荒君和大多数人一样&#xff0c;更新就去看了。魔神皇枫秀&#xff0c;威严凛然&#xff0c;突然空降月魔宫&#xff0c;整个宫殿都在这股无与伦比的强大气息中颤栗。为了顺利躲避魔神皇的…...

编程日记 2023/11/23 23:43:09

汽车级全保护型六路半桥驱动器NCV7708FDWR2G 原理、参数及应用

NCV7708FDWR2G 是一款全保护型六路半桥驱动器&#xff0c;特别适用于汽车和工业运动控制应用。六个高压侧和低压侧驱动器可自由配置&#xff0c;也可单独控制。因此可实现高压侧、低压侧和 H 桥控制。H 桥控制提供正向、逆向、制动和高阻抗状态。驱动器通过标准 SPI 接口进行控…...

编程日记 2023/11/23 23:42:09

【小技巧】MyBatis 中 SQL 写法技巧小总结

最近有个兄弟在搞mybatis&#xff0c;问我怎么写sql &#xff0c;说简单一点mybatis就是写原生sql&#xff0c;官方都说了 mybatis 的动态sql语句是基于 OGNL表达式的。可以方便的在 sql 语句中实现某些逻辑. 总体说来mybatis 动态SQL 语句主要有以下几类: if 语句 (简单的条件…...

编程日记 2023/11/23 23:41:07

C#编程题分享（4）

换行输出整数问题 输⼊任意⼀个位数未知的整数&#xff0c;输出这个数每⼀位上的数字。输出的时候&#xff0c;从个位开始输出&#xff0c;每输出⼀个数字换⼀⾏。样例输⼊&#xff1a;3547 输出&#xff1a;7 换行输出 4 换行输出5 换行输出3 int n Convert.ToInt32(Conso…...

编程日记 2023/11/23 23:40:05

CTF靶场搭建及Web赛题制作与终端docker环境部署

♥ ♡ ♥ ♡ ♥ ♡ ♥ ♡ ♥ ♡ ♥ ♡ ♥ ♡ ♥ ♡ ♥ ♡ ♥ ♡ ♥ ♡ ♥ ♡ ♥ ♡ ♥ ♡ ♥ ♡ ♥ ♡ ♥ ♡ ♥ ♡ ♥ ♡ ♥ ♡ ♥ ♡ ♥ ♡ ♥ ♡ ♥ 写在前面 ╔═══════════════════════════════════════════════════…...

编程日记 2023/11/23 23:38:02

nodejs express vue uniapp新闻发布系统源码

开发技术&#xff1a; node.js&#xff0c;mysql5.7&#xff0c;vscode&#xff0c;HBuilder nodejs express vue uniapp 功能介绍&#xff1a; 用户端&#xff1a; 登录注册 首页显示搜索新闻&#xff0c;新闻分类&#xff0c;新闻列表 点击新闻进入新闻详情&#xff0…...

编程日记 2023/11/23 23:37:01

FastText模型文本分类

项目地址&#xff1a;NLP-Application-and-Practice/07_FastText/7.2-FastText文本分类/text_classification at master zz-zik/NLP-Application-and-Practice (github.com) 加载数据 load_data.py # coding: UTF-8 import os import pickle as pkl from tqdm import tqdmMA…...

编程日记 2023/11/23 23:36:00

CentOS 7 使用Fmt库

安装 fmt Git下载地址&#xff1a;https://github.com/fmtlib/fmt 步骤1&#xff1a;首先&#xff0c;你需要下载fmt的源代码。你可以从https://github.com/fmtlib/fmt或者源代码官方网站下载。并上传至/usr/local/source_code/ ​ 步骤2&#xff1a;下载完成后&#xff…...

编程日记 2023/11/23 23:34:59

如何通过宝塔面板搭建一个本地MySQL数据库服务并实现远程访问

宝塔安装MySQL数据库&#xff0c;并内网穿透实现公网远程访问 文章目录 宝塔安装MySQL数据库&#xff0c;并内网穿透实现公网远程访问前言1.Mysql服务安装2.创建数据库3.安装cpolar3.2 创建HTTP隧道 4.远程连接5.固定TCP地址5.1 保留一个固定的公网TCP端口地址5.2 配置固定公网…...

编程日记 2023/11/23 23:31:55

普通话考试相关（一文读懂）

文章目录&#xff1a; 一&#xff1a;相关常识 1.考试报名时间 2.报名地方 费用 证件 3.考试流程 4.普通话等级说明 二&#xff1a;题型 三&#xff1a;技巧 1.前三题 2.命题说话 四&#xff1a;普通话考试题库 1.在线题库 2.下载题库 一&#xff1a;相关常识 …...

编程日记 2023/11/23 23:30:54

深度学习动物识别 - 卷积神经网络 机器视觉 图像识别 计算机竞赛

文章目录 0 前言1 背景2 算法原理2.1 动物识别方法概况2.2 常用的网络模型2.2.1 B-CNN2.2.2 SSD 3 SSD动物目标检测流程4 实现效果5 部分相关代码5.1 数据预处理5.2 构建卷积神经网络5.3 tensorflow计算图可视化5.4 网络模型训练5.5 对猫狗图像进行2分类 6 最后 0 前言 &#…...

编程日记 2023/11/23 23:29:53

【Redisson】基于自定义注解的Redisson分布式锁实现

前言 在项目中&#xff0c;经常需要使用Redisson分布式锁来保证并发操作的安全性。在未引入基于注解的分布式锁之前&#xff0c;我们需要手动编写获取锁、判断锁、释放锁的逻辑&#xff0c;导致代码重复且冗长。为了简化这一过程&#xff0c;我们引入了基于注解的分布式锁&…...

编程日记 2023/11/23 23:28:52

QT中样式表常见属性与颜色的设置与应用

常见样式表属性 在Qt中的样式表（QSS）中，有一些特定的英文单词和关键字用于指定不同的样式属性。以下是常见的一些英文单词和关键字： 颜色（Colors）： color: 文本颜色 background-color: 背景颜色 border-color: 边框颜色 字体（Fonts）： font: 字体 font-family: 字体…...

编程日记 2023/11/23 23:27:51

OpenCvSharp从入门到实践-（02）图像处理的基本操作

目录 图像处理的基础操作 1、读取图像 1.1、读取当前目录下的图像 2、显示图像 2.1、Cv2.ImShow 用于显示图像。 2.2、Cv2.WaitKey方法用于等待用户按下键盘上按键的时间。 2.3、Cv2.DestroyAllWindows方法用于销毁所有正在显示图像的窗口。 2.4实例1-显示图像 2.4实例…...

编程日记 2023/11/23 23:26:49

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

编程新知 2025/10/5 2:30:38

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令&#xff1a; return <value>;在收到客户端连接后&#xff0c;立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量&#xff08;如 $time_iso8601、$remote_addr 等&#xff09;&a…...

编程新知 2025/9/21 0:49:02

相机Camera日志实例分析之二：相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

编程新知 2026/2/11 16:21:50

在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module

1、为什么要修改 CONNECT 报文&#xff1f; 多租户隔离&#xff1a;自动为接入设备追加租户前缀&#xff0c;后端按 ClientID 拆分队列。零代码鉴权&#xff1a;将入站用户名替换为 OAuth Access-Token&#xff0c;后端 Broker 统一校验。灰度发布&#xff1a;根据 IP/地理位写…...

编程新知 2025/8/1 10:20:23

Rust 异步编程

Rust 异步编程 引言 Rust 是一种系统编程语言，以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天，异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...

编程新知 2025/11/17 18:58:56

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码：使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出：5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...

编程新知 2025/9/22 21:37:01

微信小程序云开发平台MySQL的连接方式

注&#xff1a;微信小程序云开发平台指的是腾讯云开发 先给结论&#xff1a;微信小程序云开发平台的MySQL&#xff0c;无法通过获取数据库连接信息的方式进行连接&#xff0c;连接只能通过云开发的SDK连接&#xff0c;具体要参考官方文档&#xff1a; 为什么&#xff1f; 因为…...

编程新知 2026/2/1 5:24:17

是否存在路径（FIFOBB算法）

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

编程新知 2025/10/1 6:09:21

Java多线程实现之Thread类深度解析

Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...

编程新知 2025/8/28 21:52:02

Mobile ALOHA全身模仿学习

一、题目 Mobile ALOHA&#xff1a;通过低成本全身远程操作学习双手移动操作 传统模仿学习&#xff08;Imitation Learning&#xff09;缺点&#xff1a;聚焦与桌面操作&#xff0c;缺乏通用任务所需的移动性和灵活性 本论文优点&#xff1a;&#xff08;1&#xff09;在ALOHA…...

编程新知 2026/1/27 14:18:20