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

CSS3动画

news 2026/4/29 0:12:57

在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

蓝桥杯嵌入式备赛：用STM32的TIM输入捕获测频率，从寄存器到HAL库代码保姆级解析

蓝桥杯嵌入式竞赛实战&#xff1a;TIM输入捕获测频率全流程解析 在蓝桥杯嵌入式竞赛中&#xff0c;精确测量信号频率是常见的基础任务。对于初次接触STM32定时器输入捕获功能的同学来说&#xff0c;往往面临两个困惑&#xff1a;一是HAL库函数调用虽然方便但像黑盒子&#xff0…...

编程新知 2026/4/28 23:53:05

如何处理ORA-01555报错_快照过旧与UNDO_RETENTION参数调整

ORA-01555本质是查询所需的一致性读镜像被覆盖&#xff0c;主因是UNDO_RETENTION与实际空间不足的矛盾&#xff1b;需优先扩容UNDO表空间并启用AUTOEXTEND&#xff0c;再合理调参&#xff0c;对长查询应分片处理而非盲目延长保留时间。ORA-01555报错本质是UNDO数据被覆盖&#…...

编程新知 2026/4/28 23:41:49

3分钟完成Figma中文汉化！FigmaCN插件让你的设计工作更高效

3分钟完成Figma中文汉化&#xff01;FigmaCN插件让你的设计工作更高效 【免费下载链接】figmaCN 中文 Figma 插件&#xff0c;设计师人工翻译校验 项目地址: https://gitcode.com/gh_mirrors/fi/figmaCN 还在为Figma的英文界面而苦恼吗&#xff1f;作为一名中文设计师&a…...

编程新知 2026/4/28 23:18:32

告别CNN，用ViT做图像分类真的更牛吗？手把手带你复现ViT核心步骤（附PyTorch代码）

视觉Transformer实战&#xff1a;从零构建ViT模型并对比CNN性能差异 当ResNet还在计算机视觉领域占据主导地位时&#xff0c;Google Research的一篇论文《AN IMAGE IS WORTH 16X16 WORDS》彻底改变了游戏规则。视觉Transformer(ViT)的出现&#xff0c;让传统卷积神经网络(CNN)的…...

编程新知 2026/4/28 22:26:32

从防火墙到零信任：用Zscaler ZTX改造企业安全架构的避坑指南

从防火墙到零信任&#xff1a;用Zscaler ZTX改造企业安全架构的避坑指南 当企业数字化转型进入深水区&#xff0c;传统防火墙构筑的"护城河"安全模型正面临前所未有的挑战。一位金融科技公司的CSO曾向我展示过他们的网络拓扑图&#xff1a;23台下一代防火墙、7套VPN集…...

编程新知 2026/4/28 20:27:07

保姆级教程：用PyTorch 1.7.1+cu110和SSD算法训练你自己的VOC格式数据集

基于PyTorch与SSD的实战目标检测&#xff1a;从数据准备到模型训练全流程解析 目标检测作为计算机视觉领域的核心任务之一&#xff0c;在工业质检、自动驾驶、安防监控等场景中发挥着重要作用。SSD&#xff08;Single Shot MultiBox Detector&#xff09;算法以其高效的检测速…...

编程新知 2026/4/28 19:27:55

Qwen3.5-2B效果对比展示：不同Temperature下代码生成稳定性与创造性实测

Qwen3.5-2B效果对比展示&#xff1a;不同Temperature下代码生成稳定性与创造性实测 1. 模型概览 Qwen3.5-2B是Qwen3.5系列中的轻量化多模态基础模型&#xff0c;仅20亿参数规模&#xff0c;专为低功耗、低门槛部署场景设计。该模型遵循Apache 2.0开源协议&#xff0c;支持免费…...

编程新知 2026/4/28 18:11:19

UCIe 1.0 实战笔记：当PCIe 6.0 Flit遇上Chiplet，这10个字节的改动意味着什么？

UCIe 1.0 技术解析&#xff1a;PCIe 6.0 Flit与Chiplet互连的10字节优化设计 在芯片设计领域&#xff0c;UCIe&#xff08;Universal Chiplet Interconnect Express&#xff09;标准的出现为异构集成提供了全新的互连解决方案。作为PCIe 6.0的扩展&#xff0c;UCIe 1.0特别针对…...

编程新知 2026/4/28 16:42:47

告别Deepsort！用YOLOv5+ByteTrack实现实时多目标跟踪（附Python代码与UI界面）

YOLOv5ByteTrack实战&#xff1a;构建高性能多目标追踪系统 在计算机视觉领域&#xff0c;多目标追踪(MOT)一直是研究热点和工程难点。传统方案如DeepSORT虽然成熟稳定&#xff0c;但在处理复杂场景时往往面临性能瓶颈。ByteTrack作为2021年提出的新算法&#xff0c;通过创新性…...

编程新知 2026/4/28 16:27:52

BiliTools：2026年最全能的哔哩哔哩资源管理工具箱完整指南

BiliTools&#xff1a;2026年最全能的哔哩哔哩资源管理工具箱完整指南 【免费下载链接】BiliTools A cross-platform bilibili toolbox. 跨平台哔哩哔哩工具箱&#xff0c;支持下载视频、番剧等等各类资源 项目地址: https://gitcode.com/GitHub_Trending/bilit/BiliTools …...

编程新知 2026/4/28 16:00:49