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

CSS:让动画流畅生动的缓动函数

在CSS中,可以使用transition属性或者@keyframes关键帧动画来创建动画效果。

使用缓动函数则可以让动画更加流畅和生动。

div {transition: <property> <duration> <timing-function> <delay>;
}div {animation: <keyframes-name> <duration> <timing-function>;
}

以上代码中的 timing-function 就是我们的缓动函数了

常见的缓动函数如下:

1、线性缓动函数

linear (point-list):接受多个关键点作为参数,多个关键点可以实现在不同时间出现不同速率,速率的变化是直接转折的,用法如下

linear(0, 1) // 以固定的速度变化,等同于关键字linear
linear(0, 0.9, 1)  // 50%的时间播放前90%的动画,剩下50%的时间播放完后10%的动画
linear(0, 0.5 20%, 0.8 60%, 1)  // 前20%的时间 播放前50%的动画,中间40%的时间播放中间30%的动画,后面40%的时间播放剩下的20%的动画

关键字:
linear(线性): 元素以固定的速度变化,等价于缓动函数 linear(0, 1)。

2、三次贝塞尔缓动函数

cubic-bezier(x1, y1, x2, y2):贝塞尔曲线缓动函数接受两个点坐标(参数值应在[0, 1]),以及作为起点的坐标(0,0),终点坐标(1,1) 通过控制这四个点的位置,可以创建更复杂的动画过渡效果。

关键字:

ease(慢-快-慢): 这是默认的缓动函数,元素会在开始和结束时较慢移动,而在中间会加速,等价于cubic-bezier(0.25, 0.1, 0.25, 1.0)。

ease-in(慢-快): 元素会开始时较慢,然后逐渐加快,等价于cubic-bezier(0.42, 0.0, 1.0, 1.0)。

ease-out(快-慢): 元素会以较快的速度开始,然后逐渐减速,等价于cubic-bezier(0.0, 0.0, 0.58, 1.0)。

ease-in-out(慢-快-慢): 动画元素会慢慢开始,加速移动,然后再减速结束,等价于cubic-bezier(0.42, 0.0, 0.58, 1.0)。

3、阶跃缓动函数

steps (number, start | end):函数接受两个参数:第一个参数表示动画分为几布;第二个参数的start 表示每一布的变化时机。用法如下

// 假设动画持续4s,将 P 点从 0px 移动到 40px
steps (4, end) // 将动画分成4步,第1s P 点停留在0px,第1s末第2s初跳跃到10px,以此类推
steps (4, start) // 将动画分成4步,第1s P 点停留在10px,第1s末第2s初跳跃到20px,以此类推

关键字:

step-start: 等价于steps(1, start)

step-end: 等价于steps(1, end)

相关文章:

CSS:让动画流畅生动的缓动函数

在CSS中&#xff0c;可以使用transition属性或者keyframes关键帧动画来创建动画效果。 使用缓动函数则可以让动画更加流畅和生动。 div {transition: <property> <duration> <timing-function> <delay>; }div {animation: <keyframes-name> &l…...

蓝桥杯集训·每日一题2024 (差分)

前言&#xff1a; 差分笔记以前就做了&#xff0c;在这我就不再写一遍了&#xff0c;直接上例题。 例题&#xff1a; #include<bits/stdc.h> using namespace std; int a[10009],b[100009]; int main(){int n,ans10,ans20;cin>>n;for(int i1;i<n;i){cin>>…...

嵌入式通信数据经常说的大端和小端模式(学习)

一.概念 大端模式&#xff08;Big-endian&#xff09;&#xff1a;高位字节排放在内存的低地址端&#xff0c;低位字节排放在内存的高地址端&#xff0c;即正序排列&#xff0c;高尾端&#xff1b; 小端模式&#xff08;Little-endian&#xff09;&#xff1a;低位字节排放在…...

bun 单元测试

bun test Bun 附带了一个快速、内置、兼容 Jest 的测试运行程序。测试使用 Bun 运行时执行&#xff0c;并支持以下功能。 TypeScript 和 JSX生命周期 hooks快照测试UI 和 DOM 测试使用 --watch 的监视模式使用 --preload 预加载脚本 Bun 旨在与 Jest 兼容&#xff0c;但并非所…...

阿里云2核4G服务器支持多少人同时在线?

2核4G服务器支持多少人在线&#xff1f;阿里云服务器网账号下的2核4G服务器支持20人同时在线访问&#xff0c;然而应用不同、类型不同、程序效率不同实际并发数也不同&#xff0c;2核4G服务器的在线访问人数取决于多个变量因素&#xff1a; 2核4G&#xff1a;2核CPU和4G内存对…...

浏览器发出一个请求到收到响应步骤详解

前言 在网络通信中&#xff0c;浏览器向Web服务器发送HTTP请求消息的过程是一个复杂而精密的环节&#xff0c;涉及到URL解析、DNS解析、数据拆分、路由表规则和MAC头部添加等一系列步骤。本文将深入探讨这一过程的每个环节&#xff0c;帮助读者更全面地了解浏览器与Web服务器之…...

121. 买卖股票的最佳时机【leetcode】/动态规划

121. 买卖股票的最佳时机 给定一个数组 prices &#xff0c;它的第 i 个元素 prices[i] 表示一支给定股票第 i 天的价格。 你只能选择 某一天 买入这只股票&#xff0c;并选择在 未来的某一个不同的日子 卖出该股票。设计一个算法来计算你所能获取的最大利润。 返回你可以从…...

K8S Service相关概念

Service基本概念 K8S Service是K8S实现微服务架构最重要的组件之一&#xff0c;主要作用&#xff1a;1&#xff09;为Pod提供稳定的访问地址&#xff08;域名或IP&#xff09;&#xff0c;2&#xff09;实现负责均衡&#xff0c;3&#xff09;自动屏蔽后端Endpoints的变化。 …...

小米消金剖析“冒充老板”诈骗案例,呼吁群众提高反诈意识

近年来&#xff0c;诈骗手段日益翻新&#xff0c;冒充公司老板身份进行诈骗的案例屡见不鲜。不法分子利用人们的焦虑心理&#xff0c;以冒充老板的身份进行诈骗&#xff0c;给无数工作人员和企业带来了巨大的经济损失。重庆小米消费金融有限公司&#xff08;以下简称“小米消金…...

全量知识系统问题及SmartChat给出的答复 之14 解析器+DDD+文法型 之2

Q36. 知识系统中设计的三种文法解析器和设计模式之间的关系 进一步&#xff0c;我想将 知识系统中设计的三种语言&#xff08;形式语言、人工语言和自然&#xff09;的文法解析器和DDD中的三种程序类型&#xff08;领域模型、领域实体和领域服务&#xff09; 形式语言文法 我…...

蓝桥杯备赛 day2 | 4. 付账问题 5. 数字三角形

付账问题&#xff0c;关键是要了解整型的范围&#xff0c;确定获取输入数据的变量类型 需要注意的是int的十进制范围-32768 ~ 32767&#xff0c;那么我们可以知道&#xff0c;人数n是可以用int来装的&#xff0c;需付款数S应该是long long&#xff0c;获取的每个人初始钱数也应…...

2024关于idea激活码报This license xxxx has been suspended

HOSTS文件中增加 0.0.0.0 www.jetbrains.com 0.0.0.0 account.jetbrains.com 然后...

Android9-W517-使用NotificationListenerService监听通知

目录 一、前言 二、前提 三、方案 方案一 方案二 方案三 方案四 方案五 方案六 方案七 四、关于NotificationListenerService类头注释 五、结论 一、前言 NotificationListenerService可以让应用监听所有通知&#xff0c;但是无法获得监听通知的权限&#xff0c;如…...

git的“You can‘t push commits with committe“解决方法

如果使用错误的用户和邮箱执行了git提交&#xff0c;在执行 git push 时将遇到如下错误&#xff1a; ! [remote rejected] feature_116390305_story_0 -> feature_116390305_story_0 (You cant push commits with committer ‘yijian’ or email eyjianqq.com who is not ex…...

CAN总线的拓扑类型和CAN收发器(原理讲解)

1&#xff1a;CAN收发器&#xff08;原理讲解&#xff09; 从原理上来讲CAN_H拉升电压&#xff0c;或CAN_L拉低电压的原理。 以上是TJA1145AT的俯瞰图&#xff0c;此芯片是NXP比较先进的CAN收发器&#xff0c;带SPI总线系统。 回到正题&#xff0c;CAN_H和CAN_L收发器是通过内…...

如何实现WordPress后台显示文章、分类目录、标签等的ID?

我们平时在使用WordPress的过程中&#xff0c;偶尔需要用到文章的ID&#xff0c;或分类目录ID&#xff0c;或标签ID&#xff0c;或媒体库ID&#xff0c;或评论ID&#xff0c;或用户ID等&#xff0c;但是WordPress后台默认是不显示它们的ID的。 今天boke112百科就跟大家分享如何…...

【GB28181】SIP协议实践之Windows下VS2019编译eXosip、osip,测试(附工程源码,一键打开编译)

引言 SIP开源库或者GB28181,这里选择了osip和eXosip,但是这两个库的编译使用有些麻烦,源码下来之后编译会出现很多问题,网上也没有找到完整的编译介绍,只能一步一步的找办法解决,以下帮大家整理编译过程。 如果不想编译,可以跳转文章末尾链接直接下载相应工程直接编译即…...

GPT提示语格式——个人自用

总体格式 指令&#xff1a;将 输入 划分为/翻译为/提取出/... 输出 输出格式&#xff1a;... 输入示例&#xff1a;... 输出示例&#xff1a;... 输入&#xff1a;... 输出&#xff1a;基本概述 示例 指令&#xff1a; 提取以下文本中的介词。 输入&#xff1a;“虽然这些发展…...

MCU最小系统电路设计(以STM32F103C8T6为例)

目录 一、何为最小系统&#xff1f; 二、最小系统电路设计 1.电源 &#xff08;1&#xff09;各种名词解释 &#xff08;2&#xff09;为什么会有VDD_1 _2 _3区分&#xff1f; &#xff08;3&#xff09;Mirco USB &#xff08;4&#xff09;5v->3.3v滤波电路 &#…...

[JavaWeb学习日记]JSP+Cookie+Filter与登录+CRUD案例

目录 一.JSP 二.EL表达式与JSTL标签 三.Cookie 四.Session 五.Filter 六. 登录CRUD:品牌增删改查案例 Demo一览 1.导包 2.构建包结构 3.创建数据库表tb_brand与user 4.创建实体类 5.mybatis的配置文件和logback配置文件 6.写接口 7.工具类&#xff1a;生成图片与…...

2026 年提词器 App 的新方向:AI 改稿 + 语速匹配,正在重新定义“读稿“这件事

核心结论&#xff1a;2026 年提词器 App 已经从"滚字幕"进化到"懂你怎么说"。AI 语速匹配、智能跟读、违禁词检测正在成为新标配&#xff0c;而在综合体验上&#xff0c;拍摄提词器是目前把这些能力整合得最完整的一款产品。一、提词器 App 正在经历一次代…...

Adams导入SOLIDWORKS模型“隐身”难题:从Parasolid格式到视图显示的完整排查指南

1. 当你的模型在Adams中"隐身"了怎么办&#xff1f; 最近有个做机械仿真的朋友跟我吐槽&#xff0c;说他在SOLIDWORKS里精心设计的模型&#xff0c;导出为Parasolid格式后导入Adams&#xff0c;结果模型树里明明有显示&#xff0c;3D视图区却空空如也。这种"看…...

XiaoMusic:让小爱音箱突破音乐限制的开源解决方案

XiaoMusic&#xff1a;让小爱音箱突破音乐限制的开源解决方案 【免费下载链接】xiaomusic 使用小爱音箱播放音乐&#xff0c;音乐使用 yt-dlp 下载。 项目地址: https://gitcode.com/GitHub_Trending/xia/xiaomusic 你是否遇到过这样的困扰&#xff1a;想听的歌曲在各大…...

ESLint-Plugin-Unicorn规则优先级设置终极指南:如何平衡代码质量和开发效率

ESLint-Plugin-Unicorn规则优先级设置终极指南&#xff1a;如何平衡代码质量和开发效率 【免费下载链接】eslint-plugin-unicorn More than 100 powerful ESLint rules 项目地址: https://gitcode.com/gh_mirrors/es/eslint-plugin-unicorn ESLint-Plugin-Unicorn是一个…...

国密双证书体系深度解读:为什么你的GMTLS客户端需要两个证书?从ECC到ECDHE模式全解析

国密双证书体系深度解析&#xff1a;从设计哲学到工程实践 当开发者第一次接触国密GMTLS协议时&#xff0c;最令人困惑的莫过于那个看似"多余"的第二个证书。为什么在标准TLS中运行良好的单证书体系&#xff0c;到了国密环境中就需要拆分成加密证书和签名证书&#x…...

高效媒体下载全平台解决方案:跨平台资源获取工具深度指南

高效媒体下载全平台解决方案&#xff1a;跨平台资源获取工具深度指南 【免费下载链接】BiliTools A cross-platform bilibili toolbox. 跨平台哔哩哔哩工具箱&#xff0c;支持下载视频、番剧等等各类资源 项目地址: https://gitcode.com/GitHub_Trending/bilit/BiliTools …...

效率倍增:用快马云端jupyter notebook打造可复现、易协作的数据分析流水线

效率倍增&#xff1a;用快马云端jupyter notebook打造可复现、易协作的数据分析流水线 最近在团队里做数据分析时&#xff0c;经常遇到这样的困扰&#xff1a;每次新同事加入项目&#xff0c;都要花半天时间配置本地jupyter环境&#xff1b;好不容易跑通的代码&#xff0c;换台…...

手把手教你用Python+Folium搭建离线地图应用(附高德瓦片下载技巧)

PythonFolium离线地图开发实战&#xff1a;从瓦片下载到内网部署全指南 当你在偏远山区进行地质勘探时&#xff0c;突然发现手机信号全无&#xff0c;而团队急需查看预设路线上的地形数据&#xff1b;或者在企业内网环境中&#xff0c;安全策略禁止访问外部地图服务&#xff0c…...

电赛E题三子棋:我是如何用Open MV色块识别替代矩形识别,搞定棋盘定位的?

电赛E题三子棋&#xff1a;OpenMV色块识别技术实战解析 从矩形识别到色块识别的技术转型 在电子设计竞赛的视觉识别任务中&#xff0c;棋盘定位一直是个经典难题。最初我们团队采用了官方推荐的矩形识别方案&#xff0c;但实际调试中遇到了诸多挑战&#xff1a; 识别率不稳定&a…...

深入解析CC Switch架构:构建AI开发工具统一管理引擎

深入解析CC Switch架构&#xff1a;构建AI开发工具统一管理引擎 【免费下载链接】cc-switch A cross-platform desktop All-in-One assistant tool for Claude Code, Codex, OpenCode, openclaw & Gemini CLI. 项目地址: https://gitcode.com/GitHub_Trending/cc/cc-swit…...