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)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/725408.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CSS、less、Sass、Scss、Stylus的认识

Sass、Scss、Less和Stylus区别总结_stylus scss-CSDN博客

鸿蒙Harmony应用开发—ArkTS声明式开发(事件独占控制)

设置组件是否独占事件&#xff0c;事件范围包括组件自带的事件和开发者自定义的点击、触摸、手势事件。 在一个窗口内&#xff0c;设置了独占控制的组件上的事件如果首先响应&#xff0c;则本次交互只允许此组件上设置的事件响应&#xff0c;窗口内其他组件上的事件不会响应。 …

AndroidStudio连不上adb报错ADB Connection Error

之前笔者一直通过AndroidStudio来看日志&#xff0c;也一直用的一套自己的SDK&#xff0c;用了好几年了。 但是突然有一天&#xff0c;AndroidStudio启动后就弹出警告窗&#xff1a;ADB Connection Error&#xff0c;如下&#xff1a; 在Event Log面板还持续性的输出&#x…

想在Vue中使用v-for来循环遍历一组对象,但只循环三次

想在Vue中使用v-for来循环遍历一组对象&#xff0c;但只想循环三次&#xff0c;你可以通过一些方法来达到这个目的。下面是一些建议的方法&#xff1a; 1. 使用数组的切片方法 如果你的对象是在一个数组中&#xff0c;你可以使用数组的slice()方法来只取数组的前三个元素。 v…

C++——string类

前言&#xff1a;哈喽小伙伴们&#xff0c;从这篇文章开始我们将进行若干个C中的重要的类容器的学习。本篇文章将讲解第一个类容器——string。 目录 一.什么是string类 二.string类常见接口 1.string类对象的常见构造 2.string类对象的容量操作 3. string类对象的访问及遍…

微软亚太区AI智能应用创新业务负责人许豪,将出席“ISIG-AIGC技术与应用发展峰会”

3月16日&#xff0c;第四届「ISIG中国产业智能大会」将在上海中庚聚龙酒店拉开序幕。本届大会由苏州市金融科技协会指导&#xff0c;企智未来科技&#xff08;AIGC开放社区、RPA中国、LowCode低码时代&#xff09;主办。大会旨在聚合每一位产业成员的力量&#xff0c;深入探索A…

16 PyTorch 神经网络基础【李沐动手学深度学习v2】

1. 模型构造 在构造自定义块之前&#xff0c;我们先回顾一下多层感知机的代码。 下面的代码生成一个网络&#xff0c;其中包含一个具有256个单元和ReLU激活函数的全连接隐藏层&#xff0c; 然后是一个具有10个隐藏单元且不带激活函数的全连接输出层。 层和块 构造单层神经网咯…

智慧安防视频远程监控平台EasyCVR集成后播放只有一帧画面是什么原因?

智慧安防视频监控平台EasyCVR能在复杂的网络环境中&#xff08;专网、局域网、广域网、VPN、公网等&#xff09;将前端海量的设备进行统一集中接入与视频汇聚管理&#xff0c;平台可支持的接入协议包括&#xff1a;国标GB28181、RTSP/Onvif、RTMP&#xff0c;以及厂家的私有协议…

【Power Apps】实现一个响应式的对话框功能

在我们开始之前需要把这里关一下&#xff0c;不然的话会影响响应式布局的效果。 首先我们添加一个垂直容器作为遮罩层。 遮罩层的宽高直接设置为跟随父元素即可&#xff0c;让遮罩层占满整个屏幕&#xff0c;再把填充色改为有一定透明度的黑色&#xff0c;形成遮罩效果。 然后…

远程-debug

java -Xdebug -Xrunjdwp:transportdt_socket,servery,suspendy,address8888 -jar app.jar --server.port2023 & java项目如何远程Debug调试

C# 的一些好用的语法糖介绍

C# 中有很多语法糖&#xff08;Syntactic sugar&#xff09;&#xff0c;它们是一些语言特性&#xff0c;使得编写代码更加简洁、易读、更具表现力。 Lambda 表达式&#xff1a; Lambda 表达式允许你编写简洁的匿名函数。例如&#xff1a; Func<int, int, int> add (a,…

论文翻译 - Visual Adversarial Examples Jailbreak Large Language Models

论文链接&#xff1a;https://arxiv.org/pdf/2306.13213.pdf Visual Adversarial Examples Jailbreak Aligned Large Language Models Abstract1 Introduction2 Related Work3 Adversarial Examples as Jailbreakers3.1 Setup3.2 Our Attack3.3 Implementations of Attackers …

Python教程:time.perf_counter()计算程序运行的时间

time.perf_counter() 是 Python 中的一个函数&#xff0c;它属于 time 模块。它用于测量代码的执行时间&#xff0c;提供了一个高分辨率的性能计数器&#xff0c;通常用于基准测试、性能分析和时间测量。 以下是关于 time.perf_counter() 的一些关键点&#xff1a; 高分辨率&…

【b站咸虾米】1 Vue介绍 2021最新Vue从基础到实例高级_vue2_vuecli脚手架博客案例

课程地址&#xff1a;【2021最新Vue从基础到实例高级_vue2_vuecli脚手架博客案例】 https://www.bilibili.com/video/BV1pz4y1S7bC/?share_sourcecopy_web&vd_sourceb1cb921b73fe3808550eaf2224d1c155 感觉尚硅谷的Vue看完忘得差不多了&#xff0c;且之前学过咸虾米的unia…

Codeforces Round 932 (Div. 2) --- C. Messenger in MAC --- 题解

C Messenger in MAC 题目大意&#xff1a; 思路解析&#xff1a; 答案计算为 , 可以发现当所选的几个信息固定后&#xff0c;其实后面的一项就变为b_max - b_min&#xff0c;得到了这个结论之后&#xff0c;其实我们可以直接把整个信息按照b进行排序&#xff0c;枚举l,r&am…

机器学习:探索计算机的自我进化之路

当我们谈论机器学习时&#xff0c;我们在谈论什么呢&#xff1f;机器学习是一门跨学科的学科&#xff0c;它使用计算机模拟或实现人类学习行为&#xff0c;通过不断地获取新的知识和技能&#xff0c;重新组织已有的知识结构&#xff0c;从而提高自身的性能。简单来说&#xff0…

CentOS上安装JDK的详细教程

CentOS上安装JDK的详细教程 &#x1f31f; 前言 欢迎来到我的小天地&#xff0c;这里是我记录技术点滴、分享学习心得的地方。&#x1f4da; &#x1f6e0;️ 技能清单 编程语言&#xff1a;Java、C、C、Python、Go、前端技术&#xff1a;Jquery、Vue.js、React、uni-app、Ech…

基于OpenCV的图形分析辨认02

目录 一、前言 二、实验目的 三、实验内容 四、实验过程 一、前言 编程语言&#xff1a;Python&#xff0c;编程软件&#xff1a;vscode或pycharm&#xff0c;必备的第三方库&#xff1a;OpenCV&#xff0c;numpy&#xff0c;matplotlib&#xff0c;os等等。 关于OpenCV&…

unbuntu一条命令安装docker

命令 curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun报错and解决 一、没有Release文件 E: 仓库 “http://ppa.launchpad.net/paolorotolo/android-studio/ubuntu bionic Release” 没有 Release 文件。解决&#xff1a; cd /etc/apt/sources.list.d …

LVS负载均衡集群基础概念

目录 一、集群 1、集群概述 1.1 什么是集群 1.2 集群系统扩展方式 1.2.1 Scale UP&#xff08;纵向扩展&#xff09; 1.2.2 Scale OUT&#xff08;横向扩展&#xff09; 1.2.3 区别 1.3 分布式系统 1.4 分布式与集群 1.5 集群设计原则 1.6 集群设计实现 1.6.1 基础…