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

css animation 动画属性

animation

// 要绑定的关键帧规则名称
animation-name: slidein;// 定义动画完成一个周期所需的时间,秒或毫秒
animation-duration: 3s;// 定义动画速度曲线
animation-timing-function: ease;// 定义动画开始前的延迟时间
animation-delay: 1s;// 定义动画播放次数:n 具体次数;infinite:无限循环;
animation-iteration-count: infinite;// 定义动画是否反向播放
animation-direction: normal;// 定义动画再执行前后如何应用样式
animation-fill-mode: forwards;// 控制动画播放状态:running 正在播的;paused 暂停;
animation-play-state: running;// 简写 animation 属性
// animation: name duration timing-function delay iteration-count direction fill-mode play-state;


animation-timing-function: ease;(定义动画速度曲线)

ease

(默认)慢-快-慢
linear匀速
ease-in慢开始
ease-out慢结束
ease-in-out满开始、慢结束
cubic-bezier(n, n, n, n)自定义曲线

animation-direction: normal;(定义动画是否反向播放)

normal正常播放
reverse反向播放
alternate轮流正反向
alternate-reverse先反向、后正向 轮流

animation-fill-mode: forwards;(定义动画再执行前后如何应用样式)

none(默认)不应用任何样式
forwards保持最后一帧样式
backwards应用第一帧样式(考虑 delay)
both同时应用 forwards 和 backwards

 @keyframes 规则

// 定义动画的关键帧
@keyframes slidein{from {transform: translateX(0%);}50% {transform: translateX(50%);opacity: 0.5;}to {transform: translateX(100%)opacity: 1;}
}

性能考虑

优先使用 transform 和 opacity 属性进行动画,这些属性可以由浏览器高效处理;

避免动画过多元素,可能导致性能问题;

使用 will-change 属性预先告知浏览器哪些元素会变化;

.element {will-change: transform, opacity;
}

CSS will-change 属性详解

是一个性能你优化属性,它允许开发者提前告知浏览器哪些元素属性即将发生变化,让浏览器可以提前做好优化准备。

/* 基本语法 */
will-change: auto | <animateable-feature> | scroll-position | contents;
auto默认值,表示浏览器不会做任何特殊优化
ps. transform  opacity ...特定属性,指即将变化的CSS属性名称
scroll-position表示元素的滚动位置即将改变
contents表示元素的内容即将改变

相关文章:

css animation 动画属性

animation // 要绑定的关键帧规则名称 animation-name: slidein;// 定义动画完成一个周期所需的时间&#xff0c;秒或毫秒 animation-duration: 3s;// 定义动画速度曲线 animation-timing-function: ease;// 定义动画开始前的延迟时间 animation-delay: 1s;// 定义动画播放次数…...

Nacos源码—Nacos集群高可用分析(二)

4.集群节点的健康状态变动时的数据同步 (1)Nacos后台管理的集群管理模块介绍 在集群管理模块下&#xff0c;可以看到每个节点的状态和元数据。节点IP就是节点的IP地址以及端口&#xff0c;节点状态就是标识当前节点是否可用&#xff0c;节点元数据就是相关的Raft信息。 其中节点…...

SRAM详解

一、SRAM基础原理 定义与结构 SRAM&#xff08;Static Random-Access Memory&#xff0c;静态随机存取存储器&#xff09;是一种基于触发器&#xff08;Flip-Flop&#xff09;结构的易失性内存&#xff0c;通过交叉耦合的反相器&#xff08;6晶体管&#xff0c;6T单元&#xff…...

JavaWeb:MySQL进阶

多表设计 一对多&#xff08;多对一&#xff09; 外键 一对一 多对多 多表查询 内连接 外连接 子查询 -- 查询员工表 select * from emp;-- 查询部门表 select * from dept;-- 查询员工和部门 select * from emp, dept; -- 笛卡尔积select * from emp, dept where emp.dept_i…...

Golang 接口 vs Rust Trait:一场关于抽象的哲学对话

一、引言 在现代编程语言中&#xff0c;接口&#xff08;Interface&#xff09; 和 Trait 是实现多态和抽象行为的关键机制。它们允许我们定义行为契约&#xff0c;让不同的类型共享相同的语义接口&#xff0c;从而提升代码的复用性和扩展性。 Go 和 Rust 分别代表了两种截然…...

智算中心的搭建标准

智算中心的搭建标准主要涉及以下几个方面&#xff1a; 开放标准&#xff1a; 硬件与软件开放&#xff1a;从硬件到软件、从芯片到架构&#xff0c;都应采用开放、标准的技术。例如&#xff0c;硬件支持如 OCP、ODCC、Open19 等开放社区标准&#xff0c;软件采用如 OpenStack、K…...

商汤科技前端面试题及参考答案

有没有配置过 webpack,讲一下 webpack 热更新原理,能否自己实现一些插件? Webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。在实际项目中,经常会对其进行配置,以满足项目的各种需求,比如处理不同类型的文件、优化代码、配置开发服务器等。 Webpack 热更…...

windows下docker的使用

找了个docker教程 Windows Docker 安装 | 菜鸟教程Windows Docker 安装 Docker 并非是一个通用的容器工具&#xff0c;它依赖于已存在并运行的 Linux 内核环境。Docker 实质上是在已经运行的 Linux 下制造了一个隔离的文件环境&#xff0c;因此它执行的效率几乎等同于所部署的…...

AI日报 · 2025年5月07日|谷歌发布 Gemini 2.5 Pro 预览版 (I/O 版本),大幅提升编码与视频理解能力

1、谷歌发布 Gemini 2.5 Pro 预览版 (I/O 版本)&#xff0c;大幅提升编码与视频理解能力 谷歌于5月6日提前发布 Gemini 2.5 Pro 预览版 (I/O 版本)&#xff0c;为开发者带来更强编码能力&#xff0c;尤其优化了前端与UI开发、代码转换及智能体工作流构建&#xff0c;并在WebDe…...

Redis 8.0 正式版发布,新特性很强!

就在前两天&#xff0c;Redis 8.0 正式版 (GA) 来了&#xff01;这并不是一次简单的更新&#xff0c;Redis 8.0 不仅带来了性能上的进一步提升&#xff0c;还带来一些实用的新特性与功能增强。并且&#xff0c;最重要的是拥抱 AGPLv3 重归开源&#xff01; 下面&#xff0c;简单…...

MySQL核心机制:日志系统、锁机制与事务管理的深度剖析

一.介绍 MySQL作为世界上最流行的开源关系型数据库之一&#xff0c;其强大的事务处理能力和高并发支持使其在各种复杂应用场景中得到广泛应用。MySQL的核心机制包括日志系统、锁机制和事务管理&#xff0c;这些机制共同确保了数据库的ACID特性&#xff0c;为应用程序提供了可靠…...

Mybatis标签使用 -association 绑定对象,collection 绑定集合

注意 association标签中的 select , column 属性使用 collection 标签中的 ofType 属性使用 Data public class Tours implements Serializable {private static final long serialVersionUID 1L;private Integer touId;private String tourName;private Integer guideId;pri…...

IBM BAW(原BPM升级版)使用教程Toolkit介绍

本部分为“IBM BAW&#xff08;原BPM升级版&#xff09;使用教程系列”内容的补充。 一、系统Toolkit 在 IBM Business Automation Workflow (BAW) 中&#xff0c;System Toolkit 是一组预先定义和配置好的工具、功能和组件&#xff0c;旨在帮助流程设计者和开发人员快速构建…...

排列组合算法:解锁数据世界的魔法钥匙

在 C 算法的奇幻世界里&#xff0c;排列和组合算法就像是两把神奇的魔法钥匙&#xff0c;能够帮我们解锁数据世界中各种复杂问题的大门。今天&#xff0c;作为 C 算法小白的我&#xff0c;就带大家一起走进排列和组合算法的奇妙天地。 排列算法&#xff1a;创造所有可能的顺序…...

LVGL -meter的应用

1 meter介绍 lv_meter 是 LVGL v8 引入的一种图形控件&#xff0c;用于创建仪表盘样式的用户界面元素&#xff0c;它可以模拟像速度表、电压表、温度表这类模拟表盘。它通过可视化刻度、指针、颜色弧线等来展示数值信息&#xff0c;是一种非常直观的数据展示控件。 1.1 核心特…...

MCP学习

一、MCP基础理论与核心概念 1.1 协议定义与设计目标 MCP&#xff08;Model Context Protocol&#xff09;是Anthropic公司于2024年11月开源的标准化协议&#xff0c;旨在解决大型语言模型&#xff08;LLM&#xff09;与外部工具、数据源之间的动态交互问题。其核心目标包括&…...

软件工程(三):模块的内聚模型

模块内聚的7种类型&#xff08;从低到高&#xff09; 等级类型描述示例1️⃣ 最低偶然性内聚&#xff08;Coincidental Cohesion&#xff09;模块内部的各功能毫无关系&#xff0c;随机拼凑一个模块中既有文件读写&#xff0c;又有图像压缩、还处理用户登录2️⃣逻辑性内聚&am…...

Java中字符转数字的原理解析 - 为什么char x - ‘0‘能得到对应数字

前言 在Java编程中&#xff0c;我们经常需要将字符形式的数字转换为实际的数值。有很多方法可以实现这一转换&#xff0c;比如使用Integer.parseInt()或Character.getNumericValue()等方法。但有一种简便且高效的方式是直接使用char - 0运算&#xff0c;本文将详细解析这种方法…...

View的事件分发机制

&#xff08;一&#xff09;为什么要有事件分发机制 安卓界面上面的View的层级结构是树形的&#xff0c;可能出现多个View重叠在一起的现象&#xff08;如下图&#xff09;&#xff0c;当我们点击的地方为多个View重叠的区域时&#xff0c;这个点击事件应该给谁呢&#xff1f;为…...

【C++】类和对象【下】

目录 一、再探构造函数1、测试题 二、类型转换三、static成员1. 静态成员变量2. 静态成员函数 四、友元五、内部类六、匿名对象七、对象拷贝时的编译器优化 个人主页<—请点击 C专栏<—请点击 一、再探构造函数 之前我们实现构造函数时&#xff0c;初始化成员变量主要使…...

【JS逆向基础】并发爬虫

前言&#xff1a;所谓并发编程是指在一台处理器上“同时”处理多个任务。并发是在同一实体上的多个事件。强调多个事件在同一时间间隔发生。 1&#xff0c;进程、线程以及协程 【1】进程概念 我们都知道计算机的核心是CPU&#xff0c;它承担了所有的计算任务;而操作系统是计算…...

Android组件化 -> 基础组件进行Application,Activity生命周期分发

在lib_common基础组件模块创建上下文持有类&#xff0c;生命周期派发类 object AppContextProvider {private lateinit var application: Applicationprivate var currentActivityRef: WeakReference<Activity>? null// 应用生命周期监听器列表private val appLifecyc…...

42. PCB防静电环设计

PCB防静电环的作用 1. PCB防静电环的作用2. 防静电环设计技术点 1. PCB防静电环的作用 防静电环主要用于生产、运输、售后等环节人体会直接接触电路板的场景。 防静电环只在顶层和底层设计即可。 2. 防静电环设计技术点...

深入理解Java反射机制

java反射是java语言中一个强大而灵活的特性&#xff0c;它允许程序在运行时检查和操作类、接口、字段和方法。 为了方便理解下文&#xff0c;我先给出Cat对象 public class Cat implements jump,Run {private int age;public String name;protected String color;double he…...

嵌入式音视频通话EasyRTC基于WebRTC技术驱动智能带屏音箱:开启智能交互新体验

一、引言​ 随着智能家居市场的蓬勃发展&#xff0c;智能带屏音箱作为家庭智能交互中心的重要组成部分&#xff0c;其功能需求日益丰富。EasyRTC凭借其低延迟、高稳定性的特点&#xff0c;为智能带屏音箱带来了全新的交互体验&#xff0c;能满足用户在视频通话、远程监控、在线…...

1987-2023年各省进出口总额数据整理(含进口和出口)(无缺失)

1987-2023年各省进出口总额数据整理&#xff08;含进口和出口&#xff09;&#xff08;无缺失&#xff09; 1、时间&#xff1a;1987-2023年 2、来源&#xff1a;各省年鉴、统计公报 3、指标&#xff1a;进出口总额&#xff08;万美元&#xff09;、进口总额&#xff08;万美…...

paddle ocr 或 rapid ocr umi ocr 只识别了图片的下部分内容 解决方案

如上图,识别的准确率其实很高,但是只识别了下半部分的内容,上半部分的内容就没有识别到,其实是程序设置有点问题,程序设置的解决方案如下: 如上图,识别的准确率其实很高,但是只识别了下半部分的内容,上半部分的内容就没有识别到,其实是程序设置有点问题,程序设置的…...

【深度学习-Day 7】精通Pandas:从Series、DataFrame入门到数据清洗实战

Langchain系列文章目录 01-玩转LangChain&#xff1a;从模型调用到Prompt模板与输出解析的完整指南 02-玩转 LangChain Memory 模块&#xff1a;四种记忆类型详解及应用场景全覆盖 03-全面掌握 LangChain&#xff1a;从核心链条构建到动态任务分配的实战指南 04-玩转 LangChai…...

如何测试 esp-webrtc-solution_solutions_doorbell_demo 例程?

软件准备 esp-webrtc-solution/solutions/doorbell_demo 例程 此例程集成了 WebSocket 传输视频流的应用 硬件准备 ESP32P4-Function-Ev-Board 环境搭建 推荐基于 esp-idf v5.4.1 版本的环境来编译此例程 若编译时出现依赖的组件报错&#xff0c;可进行如下修改&#xff…...

default和delete final和override

1.default和delete default 1.生成默认成员函数 2.仅适用于特殊成员函数&#xff08;如构造函数、析构函数、拷贝/移动操作等&#xff09; delete 1.删除函数 2.可应用于任何函数&#xff08;不限于特殊成员函数&#xff09; 2.final 和override final 用于类&#xff1a;…...

Nvidia Orin 安装onnxruntime-gpu

在用英伟达边缘设备Nvidia Orin 安装onnxruntime-gpu环境时&#xff0c; 通常会遇到很多问题。 在正常的Nvidia 服务器上安装onnxruntime-gpu 是非常简单的&#xff0c; 直接pip install onnxruntime-gpu即可&#xff0c; 但是在边缘设备上就没有这么简单了。 直接pip install…...

C++ CRTP技术(奇异递归模版模式)

C 的CRTP技术 最近了解到C的CRTP技术&#xff0c;通过博客来这里记录一下。 我们首先可以了解一下什么是CRTP技术。CRTP是C的一种高级模版变成模式。 他主要的用途有以下的几点&#xff1a; 编译时实现多态&#xff08;静态多态&#xff09;&#xff1a;通过CRTP技术&#xf…...

验证es启动成功

1. 查看命令行输出信息 在启动 Elasticsearch 时&#xff0c;命令行窗口会输出一系列日志信息。若启动成功&#xff0c;日志里通常会有类似下面的信息&#xff1a; plaintext [2025-05-06T13:20:00,000][INFO ][o.e.n.Node ] [node_name] started其中 [node_na…...

AI工场全面激活电商创意链

在当今科技飞速发展的时代&#xff0c;北京先智先行科技有限公司凭借其卓越的创新能力&#xff0c;推出了“先知大模型”、“先行AI商学院”以及“先知AIGC超级工场”这三款旗舰产品&#xff0c;在市场上掀起了不小的波澜。  传统电商设计流程&#xff0c;从需求确认到营销策…...

数 学 函数

gcd int gcd(int a,int b){while(a%b){int ca%b;ab;bc;}return b; } 错位排列 typedef long long ll; ll d(int n){if(n1) return 0;if(n2) return 1;return (n-1)*(d(n-1)d(n-2)); } 快速幂 //注意看是否有mod的需求 int q_pow(int a,int b){int ans1,tempa;while(b){if(…...

springboot集成langchain4j记忆对话

流式输出 LLM 一次生成一个标记&#xff08;token&#xff09;&#xff0c;因此许多 LLM 提供商提供了一种方式&#xff0c;可以逐个标记地流式传输响应&#xff0c;而不是等待整个文本生成完毕。 这显著改善了用户体验&#xff0c;因为用户不需要等待未知的时间&#xff0c;几…...

C语言初阶:数组

目录 0.数组要讲的知识点 1.一维数组的创建和初始化 1.1 数组的创建&#xff1a; 1.2数组实例&#xff1a; 1.3 数组的初识化&#xff1a; 例子&#xff1a; 2.一维数组的使用 例子&#xff1a; 总结&#xff1a; 3.一维数组在内存中的存储 4.二维数组的创建和初始化 4.…...

案例分享 | 攻克ADAS开发测试难题,实现单元动态测试新突破

汽车行业中的代码动态测试&#xff1a;守护智能汽车的安全与质量 在当今汽车行业&#xff0c;智能网联汽车的快速发展让软件成为了汽车的核心竞争力之一。从自动驾驶辅助系统到车载信息娱乐系统&#xff0c;汽车中的软件数量和复杂度都在不断增加。然而&#xff0c;软件的复杂…...

K8S 基于本地存储的持久卷

假设有如下三个节点的 K8S 集群&#xff1a; ​ k8s31master 是控制节点 k8s31node1、k8s31node2 是工作节点 容器运行时是 containerd 一、背景分析 阅读本文&#xff0c;默认您有 PV-PVC、hostPath 相关知识。 由于安全方面的考虑&#xff0c;K8S 官方并不推荐 hostPath …...

LED实验

目录 1.LED介绍 1.1LED原理图&#xff1a; 2.单片机运行代码的流程 3.进制的转换 4.C51数据类型 5.小编的单片机型号&#xff1a;STC89C52RC/LE52RC&#xff0c;最高波特率&#xff1a;9600 6.点亮一个LED 代码 步骤 代码&#xff1a; 7.LED闪烁 在STC内操作&#x…...

python+pytest接口自动化测试--日志记录

前言:代码可以直接复制使用 解决问题: 问题1:日志重复记录的问题,比如运行一个模块日志会记录很多遍(通过handlers是否存在解决的) 问题2:运行测试用例进行多个模块相互调用.日志记录不全的问题(通过共享公共的handlers解决问题) 首先写一个日志记录的工具 # 这个是个日志的…...

Android 蓝牙开发调试总结

Android 蓝牙开发调试总结 文章目录 Android 蓝牙开发调试总结一、前言二、蓝牙开发1、开关和连接控制2、相关日志3、相关广播4、demo示例 三、其他1、Android 蓝牙开发调试小结2、Android14 蓝牙启动流程3、Android14 蓝牙 BluetoothService 启动和相关代码介绍4、Android13 蓝…...

混淆矩阵(Confusion Matrix)

混淆矩阵&#xff08;Confusion Matrix&#xff09;是一个用于评估分类模型性能的工具&#xff0c;特别是在机器学习和统计学领域。它展示了模型预测结果与实际结果之间的关系。混淆矩阵通常用于二分类或多分类问题中&#xff0c;但也可以扩展到更多类别的情况。 一、混淆矩阵…...

C语言——操作符

一.操作符的分类 算术操作符&#xff1a; - * / %移位操作符&#xff1a;<< >>位操作符: & | ^赋值操作符: - * / % > & | ^单⽬操作符&#xff1a; &#xff01; -- & * - ~ sizeof …...

大数据处理利器:Hadoop 入门指南

一、Hadoop 是什么&#xff1f;—— 分布式计算的基石 在大数据时代&#xff0c;处理海量数据需要强大的技术支撑&#xff0c;Hadoop 应运而生。Apache Hadoop 是一个开源的分布式计算框架&#xff0c;致力于为大规模数据集提供可靠、可扩展的分布式处理能力。其核心设计理念是…...

追踪大型语言模型的思想(上)(来自针对Claude的分析)

概述 像 Claude 这样的语言模型并非由人类直接编程&#xff0c;而是通过大量数据进行训练。在训练过程中&#xff0c;它们会学习解决问题的策略。这些策略被编码在模型为每个单词执行的数十亿次计算中。对于我们这些模型开发者来说&#xff0c;这些策略是难以捉摸的。这意…...

系统 Python 与 Conda 环境的灵活切换

在现代 Python 开发中,经常需要在系统 Python 和 Conda 环境中的 Python 之间切换。无论是处理不同项目的依赖冲突,还是测试代码在不同 Python 版本下的兼容性,灵活切换 Python 环境都是开发者的必备技能。本文将详细介绍如何实现 Python 环境的灵活切换,并提供 Conda 命令…...

【HTTP】《HTTP 全原理解析:从请求到响应的奇妙之旅》

文章目录 一、HTTP 协议1.1、HTTP 是什么1.2、理解 "应用层协议"1.3、理解 HTTP 协议的工作过程1.4、HTTP协议格式1.5、协议格式总结 二、HTTP 请求1.1、认识 URL1.1.1、URL 基本格式1.1.2、关于 URL encode 1.2、认识 "方法"1.2.1 、GET 方法1.2.2、 POST…...

重生之我在2024学Fine-tuning

一、Fine-tuning&#xff08;微调&#xff09;概述 Fine-tuning&#xff08;微调&#xff09;是机器学习和深度学习中的一个重要概念&#xff0c;特别是在预训练模型的应用上。它指的是在模型已经通过大量数据训练得到一个通用的预训练模型后&#xff0c;再针对特定的任务或数据…...

若依前后端分离项目中可以删除哪些原若依有的?

在若依&#xff08;RuoYi&#xff09;前后端分离项目中完成二次开发后&#xff0c;可以删除以下未使用的模块和文件以简化项目结构。以下分模块和风险点说明&#xff1a; --- ### **一、后端&#xff08;Spring Boot&#xff09;可删除内容** #### 1. **未使用的功能模块** …...