讲解 CSS 过渡和动画 — transition/animation (很全面)

前言

由于用户越来越注重 Web应用 的使用体验，随之而来的是 Web应用 需要提供了更加完善的 Web 动画 效果来实现以平滑的状态贯穿于用户的整个使用过程中。现在，这已经是司空见惯了，用户潜意识是希望可以获得更快的反馈响应和更友好的用户界面。

什么是 Web 动画

  • 屏幕刷新率 设备显示器每秒绘制新图像的次数，其单位为赫兹 (Hz)。目前大多数设备为 60Hz。
  • 卡顿 每个帧的预算时间仅比 16毫秒 多一点（1秒/ 60 = 16.6毫秒）。如果浏览器无法在这一帧内完成工作，则帧率将下降，可能导致跳帧，内容会在屏幕上抖动。此现象通常称为卡顿。
  • 跳帧 假如浏览器动画分别在 16ms, 32ms, 48ms时分别切帧。等到了 32ms，浏览器其他任务还未完成，没有执行动画切帧。等到恢复动画切帧时，浏览器到了 48ms 的动画切帧。浏览器直接从16ms 处的画面 跳转到 48ms 处的画面，则发生了跳帧。

在了解了上述几个概念后，我们再看 Web 动画本质是元素的外观样式或布局位置随着浏览器的逐帧绘制，以平滑的状态完成变化 。

简述 JS / CSS 动画

目前浏览器实现动画的方式有如下两种，本篇将主要讲解第二种 CSS 动画。

  • JS 动画

    • setTimeout / setInterval / requestAnimationFrame
      我们最常用的是 setTimeout 和 setInterval 这两个API。但是这两个 API 设定的时间会因为浏览器当前工作负载而有所偏差，而且无法与浏览器的绘制帧保持同步。所以才有了 与浏览器的绘制帧同步 的原生 API requestAnimationFrame，以取代 setTimeout 和 setInterval 实现动画。
    • Animation API
      浏览器动画引擎 API，通过 JavaScript 操作。这些 API 被设计成 CSS Transition 和 CSS Animation 的接口，所以可以很容易通过 JS 的方式实现 CSS 动画，它是对动画化的支持最有效的方式之一。

  • CSS 动画 (本篇主题)

    • CSS Transition
      CSS 过渡，属于补间动画，即设置关键帧的初始状态，然后在另一个关键帧改变这个状态，比如大小、颜色、透明度等，浏览器将自动根据二者之间帧的值创建的动画。
    • CSS Animation
      CSS 动画，可以理解是 CSS Transition 的加强版，它既可以实现 补间动画 的动画效果，也可以使其以 逐帧动画 的方式进行绘制。

学习 CSS 过渡 - transition

就如之前所说，它属于 补间动画，需要提供起始和结束两个关键帧，浏览器才能够完成样式差异比对并计算出对应的过渡动画。所以它有两个特点：

  1. 由于首次渲染元素的样式只会有一个关键帧，浏览器无法进行样式差异比对，所以在首屏渲染时 transition 一般不会生效
  2. 由于浏览器是根据样式差异化的两帧自动计算并过渡，所以 transition 只支持可识别中间值的属性 (如大小、颜色、位置、透明度等)，而如 display 属性则不支持。

语法定义

CSS 过渡通常使用简写属性 transition 来定义，这是最好的方式。既可以避免属性值列表长度不一，也节省了在 CSS 代码上调试的时间。当然也可以用下面子属性来定义过渡的各部分：

  • transition-property： 指定哪个或哪些 CSS 属性用于过渡。只有指定的属性才会在过渡中发生动画，其他属性仍如通常那样瞬间变化。

  • transition-duration： 指定过渡的时长。你可以为所有属性指定一个值，或者指定多个值，或者为每个属性指定不同的时长。

  • transition-timing-function： 指定一个缓动函数，定义属性值怎么变化。常见的缓动函数是一个三次贝塞尔曲线 ( cubic-bezier(<x1>, <y1>, <x2>, <y2>) )。当然也可以选择关键字

    • linear：cubic-bezier(0.0, 0.0, 1.0, 1.0)
    • 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)

    在这里插入图片描述

  • transition-delay： 指定延迟，即属性开始变化时与过渡开始发生时之间的时长。

  /* 单条 简写形式 */transition: <property> <duration> <timing-function> <delay>;/* 多条 简写形式 */transition: <property> <duration> <timing-function> <delay>,<property> <duration> <timing-function> <delay>,...;/* 单条 子属性形式 */transition-property: <property-name>;transition-duration: <duration-time>;transition-timing-function: <timing-function>;transition-delay: <duration-time>;/* 多条 子属性形式 */transition-property: <property-name> [, <property-name>, ...];transition-duration: <duration-time> [, <duration-time>, ...];transition-timing-function: [, <cubic-bezier>, ...];transition-delay: [, <duration-time>, ...];

语法范例

  • 简写形式书声明过渡样式
  div {opacity: 1;}div:hover {opacity: 0.5;transition: opacity, 3s;}
  • 如果任意属性值列表的长度比其他属性值列表要短，则其中的值会重复使用以便匹配
  div:hover {transition-property: opacity, left, top, height;transition-duration: 3s, 5s;}/* 等同于下面样式声明 */div:hover {transition-property: opacity, left, top, height;transition-duration: 3s, 5s, 3s, 5s;}
  • 如果某个属性的值列表长于 transition-property 的属性，则将被截短
  div:hover { transition-property: opacity, left;transition-duration: 3s, 5s, 2s, 1s; }/* 等同于下面样式声明 */div:hover {transition-property: opacity, left;transition-duration: 3s, 5s; }

JS 相关事件监听

你可以监听 CSS 过渡的开始和结束

  • transitionrun： CSS 过渡动画触发 (在任何延迟之前)
  • transitionstart： CSS 过渡动画触发 (在任何延迟之后)
  • transitionend： CSS 过渡动画结束

事件监听回调函数会接收一个 TransitionEvent 对象，除了具有一般的 Event 对象外，还有两个额外属性：

  1. propertyName 一个字符串，表示过渡完成的 CSS 属性的名称。
  2. elapsedTime 一个浮点数，表示在事件发生时，过渡已经运行了多少秒。

学习 CSS 动画 - animation

CSS Animation 才算是真正意义上的 CSS3 动画，它具备了对 关键帧和循环次数 的自定义能力。与 CSS Transition 相比较，有如下 CSS 过渡 所不具备的特性：

  1. CSS Animation 在实现像 CSS Transition 补间动画 效果时，还可以在起始帧和结束帧之间自定义中间帧，使得动画更加平滑过渡的同时，对动画有了更好的控制和自定义能力。
  2. CSS Animation 通过 animation-timing-function: steps() 属性实现了 CSS Transition 无法具备的 逐帧动画 效果
  3. CSS Animation 只要定义了结束帧 (即 @keyframes 中的 to)，在首屏渲染时，它默认会以指定元素在动画开始时刻的样式作为起始关键帧，并结合 to 定义的结束关键帧和指定元素的 animation 其他参数来完成补间动画的计算和动画帧的绘制。

语法定义

创建 CSS 动画序列，需要使用 animation 属性或 其子属性 animation-*，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由 @keyframes 规则实现。

- @keyframe

使用关键帧，先创建一个带名称的 @keyframes 规则，以便后续使用 animation-name 属性将动画同其关键帧声明进行匹配。每个规则包含多个关键帧，也就是一段样式块语句，每个关键帧有一个百分比值作为名称，代表在动画进行中，在哪个阶段触发这个帧所包含的样式。

css
复制代码@keyframes slidein {from {transform: translateX(0%);}to {transform: translateX(100%);}}/* 等效于下面 @keyframes 规则的定义 */@keyframes slidein {0% {transform: translateX(0%);}100% {transform: translateX(100%);}}

注意事项：

  1. 如果多个关键帧使用同一个名称，以最后一次定义的为准 (不存在层叠样式情况下)
  2. 同一关键帧中的相同属性被重复定义，则以最后一次定义的属性为准。
- animation-*

CSS 动画通常使用 animation 属性来定义，它是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 等一系列属性的简写形式。

  • animation-name：指定一个或多个 @keyframes 的名称，描述了要应用于元素的动画。多个 @keyframes 以逗号分隔的名称列表的形式指定。

  • animation-duration：设置动画完成一个动画周期所需的时间，需要指定单位，如 1s、500ms。

  • animation-delay：指定执行动画之前的等待时间。动画可以稍后开始、立即从开头开始、立即在动画中途播放 (如 -1s) 。其中 -1s 意思是动画立即从 1s 处开始。

  • animation-iteration-count：设置动画序列在停止前应播放的次数，有效值 0、正整数、正小数、无限循环 infinite。

  • animation-direction：设置动画是正向播放 normal、反向播放 reverse、正向交替播放 alternate、反向交替播放 alternate-reverse。

  • animation-play-state：设置动画是运行还是暂停，有效值 running、paused。

  • animation-fill-mode：设置 CSS 动画在执行之前和之后如何将样式应用于其目标，有效值如下：

    • none：当动画未执行时，动画将不会将任何样式应用于目标，而是已经赋予给该元素的 CSS 规则来显示该元素。这是默认值

    • both：动画将遵循 forwards 和 backwards 的规则，从而在两个方向上扩展动画属性

    • forwards：目标将保留由执行期间遇到的最后一个关键帧计算值。最后关键帧取决于 animation-direction 和 animation-iteration-count：

      animation-directionanimation-iteration-countlast keyframe
      normaleven or odd100%
      reverseeven or odd0%
      alternateeven0%
      alternateodd100%
      alternate-reverseeven100%
      alternate-reverseodd0%

    • backwards：动画将在应用于目标时立即应用第一个关键帧中定义的值，并在 delay 期间保留此值。第一个关键帧取决于 animation-direction 值：

      animation-directionfirst keyframe
      normal or alternate0%
      reverse or alternate-reverse100%

  • animation-timing-function：设置动画在每个周期的持续时间内如何进行，主要是如下两种函数：

    • cubic-bezier 三次贝塞尔曲线 ( cubic-bezier(<x1>, <y1>, <x2>, <y2>) )，以实现 补间动画 效果。

      1. linear：cubic-bezier(0.0, 0.0, 1.0, 1.0)
      2. ease：cubic-bezier(0.25, 0.1, 0.25, 1.0)
      3. ease-in：cubic-bezier(0.42, 0.0, 1.0, 1.0)
      4. ease-out：cubic-bezier(0.0, 0.0, 0.58, 1.0)
      5. ease-in-out：cubic-bezier(0.42, 0.0, 0.58, 1.0)

    • steps 是一个分段的阶跃函数，，以实现 逐帧动画。n 相当于单次动画的帧数，每帧动画的时间是均等的 (steps(n, <jumpterm>))，其中 jumpterm 含义如下：

      1. jump-start：在起始位置阶跃，n=2 ⇒ 50% 100%; (100 / 2)
      2. jump-end：在结束位置阶跃, n=4 ⇒ 0% 25% 50% 75%; (100 / 4)
      3. jump-none：起止位置均无跳跃，n=5 ⇒ 0% 25% 50% 75% 100%; (100 / 4)
      4. jump-both：起止位置均有跳跃 n=3 ⇒ 25% 50% 75%; (100 / 4)
      5. start：等同 jump-start
      6. end：等同 jump-end
      7. step-start：等同 steps(1, jump-start)
      8. step-end：等同 steps(1, jump-end)

      steps 函数动画示意图如下（输入为时间进度，输出为动画进度）

      在这里插入图片描述

      在这里插入图片描述

  /* animation 声明样式顺序 */ /* animation-duration *//* animation-easing-function *//* animation-delay */ /* animation-iteration-count *//* animation-direction *//* animation-fill-mode *//* animation-play-state *//* animation-name */animation: 3s ease-in 1s 2 reverse both paused slidein; /* animation - duration | easing-function | delay | name */animation: 3s linear 1s slidein;/* more animations - duration | easing-function | delay | name */animation: 3s linear slidein, 3s ease-out 5s slideout;/* animation-name */animation-name: none;animation-name: animate1;animation-name: animate1, animate2;/* animation-timing-function */animation-timing-function: ease;animation-timing-function: step-start;animation-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1, 0.1);/* ...... */

语法范例

  • 简写形式书声明动画样式
  p {animation: 3s infinite alternate slidein;}@keyframes slidein {0% {margin-left: 100%;width: 300%;}100% {margin-left: 0%;width: 100%;}}
  • 非简写形式书声明动画样式
  p {animation-duration: 3s;animation-name: slidein;animation-iteration-count: infinite;animation-direction: alternate;}@keyframes slidein {0% {margin-left: 100%;width: 300%;}100% {margin-left: 0%;width: 100%;}}

实验性新属性

  • animation-range：设置动画附件范围沿其时间轴的开始和结束。
  • animation-timeline：指定用于控制 CSS 动画进度的时间轴。
  • animation-composition：指定当多个动画同时影响同一属性时要使用的复合操作。

JS 相关事件监听

你可以监听 CSS 动画的开始和结束

  • animationstart
    事件会在 CSS 动画开始时触发。如果有 animation-delay 延时，事件会在延迟时效过后立即触发。为负数的延时时长会致使事件被触发时事件的 elapsedTime 属性值等于该时长的绝对值
  • animationiteration
    当 CSS 动画的迭代结束，另一个迭代开始时，将触发动画迭代事件。此事件不会与 animationend 事件同时发生
  • animationend
    动画结束事件在 CSS 动画完成时触发。如果在动画完成前中止了动画，例如将元素从 DOM 中移除，或将动画从元素上移除，该事件不会触发。
  • animationcancel
    这个事件在 CSS Animation 属性意外中断时派发出来 (换句话说，任何时候 animation 停止运行不会发出一个 animationend 事件)

事件监听回调函数会接收一个 AnimationEvent 对象，除了具有一般的 Event 对象外，还有额外属性：

  1. animationName 一个字符串，表示过渡完成的 CSS 动画的名称。
  2. pseudoElement 一个字符串，如果动画作用于伪元素上，则该属性为伪元素名称
  3. elapsedTime 一个浮点数，表示在事件发生时，过渡已经运行了多少秒。

完整项目附件：点此下载

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

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

相关文章

Elasticsearch系列组件：Beats高效的日志收集和传输解决方案

Elasticsearch系列组件：Beats高效的日志收集和传输解决方案

Elasticsearch 是一个开源的、基于 Lucene 的分布式搜索和分析引擎&#xff0c;设计用于云计算环境中&#xff0c;能够实现实时的、可扩展的搜索、分析和探索全文和结构化数据。它具有高度的可扩展性&#xff0c;可以在短时间内搜索和分析大量数据。 Elasticsearch 不仅仅是一个…
阅读更多...
接口自动化测试持续集成，Soapui接口功能测试参数化

接口自动化测试持续集成，Soapui接口功能测试参数化

按照自动化测试分层实现的原理&#xff0c;每一层的脚本实现都要进行参数化&#xff0c;自动化的目标就是要实现脚本代码与测试数据分离。当测试数据进行调整的时候不会对脚本的实现带来震荡&#xff0c;从而提高脚本的稳定性与灵活度&#xff0c;降低脚本的维护成本。Soapui最…
阅读更多...
C#，数值计算——KMeans分类的计算方法与源程序

C#，数值计算——KMeans分类的计算方法与源程序

1 文本格式 using System; namespace Legalsoft.Truffer { /// <summary> /// K-Means classification /// </summary> public class Kmeans { private int nn { get; set; } private int mm { get; set; } private …
阅读更多...
优维低代码实践：片段

优维低代码实践：片段

优维低代码技术专栏&#xff0c;是一个全新的、技术为主的专栏&#xff0c;由优维技术委员会成员执笔&#xff0c;基于优维7年低代码技术研发及运维成果&#xff0c;主要介绍低代码相关的技术原理及架构逻辑&#xff0c;目的是给广大运维人提供一个技术交流与学习的平台。 优维…
阅读更多...
5.12.webrtc接口调用过程

5.12.webrtc接口调用过程

嗨&#xff0c;大家好&#xff0c;我是李超&#xff0c;在上节课中呢&#xff0c;我向你介绍了外接口的设计以及我们红接口展开之后的样子&#xff0c;对吧&#xff1f;那今天呢&#xff1f;我们再来看看整个接口调用过程。那整个这个调用过程啊&#xff0c;非常的复杂&#xf…
阅读更多...
QCustomPlot实现曲线拖拽

QCustomPlot实现曲线拖拽

本文内容目录 需求场景&#xff1a;一、选择控件二、将QCustomPlot库整合到你的Qt项目中1、下载源代码2、创建.pri 三、鼠标框选&#xff0c;实现坐标缩放四、曲线拖动1、定位曲线2、移动时改变曲线 五、问题的产生与解决1、查看源码2、修改本项目代码 需求场景&#xff1a; 曲…
阅读更多...
excel 日期与时间戳的相互转换

excel 日期与时间戳的相互转换

1、日期转时间戳&#xff1a;B1INT((A1-70*365-19)*86400-8*3600)*1000 2、时间戳转日期&#xff1a;A1TEXT((B1/10008*3600)/8640070*36519,"yyyy-mm-dd hh:mm:ss") 以上为精确到毫秒&#xff0c;只精确到秒不需要乘或除1000。 使用以上方法可以进行excel中日期…
阅读更多...
行业追踪，2023-10-18

行业追踪，2023-10-18

自动复盘 2023-10-18 凡所有相&#xff0c;皆是虚妄。若见诸相非相&#xff0c;即见如来。 k 线图是最好的老师&#xff0c;每天持续发布板块的rps排名&#xff0c;追踪板块&#xff0c;板块来开仓&#xff0c;板块去清仓&#xff0c;丢弃自以为是的想法&#xff0c;板块去留让…
阅读更多...
Redis LFU缓存淘汰算法

Redis LFU缓存淘汰算法

前言 Redis 在 4.0 版本之前的缓存淘汰算法&#xff0c;只支持 random 和 lru。random 太简单粗暴了&#xff0c;可能把热点数据给淘汰掉&#xff0c;一般不会使用。lru 比 random 好一点&#xff0c;会优先淘汰最久没被访问的数据&#xff0c;但是它也有一个缺点&#xff0c;…
阅读更多...
英语——分享篇——每日200词——1001-1200

英语——分享篇——每日200词——1001-1200

1001——responsibility——[rɪˌspɒnsəbɪlətɪ]——n.责任——responsibility——res热死(拼音)ponsi胖子(谐音)bili比利(拼音)ty题(谐音)——热死的胖子比利做题时很有责任心——The responsibility for her family bears down on a young woman.——家庭的责任沉重地落…
阅读更多...
攻防世界web篇-PHP2

攻防世界web篇-PHP2

直接点击进入到http网页中&#xff0c;会得到这样一个界面 这里&#xff0c;我最开始使用了burp什么包也没有抓到&#xff0c;然后接着又用nikto进行探测&#xff0c;得到的只有两个目录&#xff0c;当时两个目录打开后&#xff0c;一个是fond界面&#xff0c;一个是这个网页的…
阅读更多...
【QT】常用控件——按钮组

【QT】常用控件——按钮组

继承Widget PushButton 设置图片&#xff0c;先导入图片资源&#xff0c;见&#xff1a;【QT】资源文件导入_复制其他项目中的文件到qt项目中_StudyWinter的博客-CSDN博客 在布局中添加图片 调整尺寸 toolButton 显示图片、文本 显示图片&#xff08;图片和文字都有时&#…
阅读更多...
使用Python+selenium实现第一个自动化测试脚本

使用Python+selenium实现第一个自动化测试脚本

这篇文章主要介绍了使用Pythonselenium实现第一个自动化测试脚本&#xff0c;文中通过示例代码介绍的非常详细&#xff0c;对大家的学习或者工作具有一定的参考学习价值&#xff0c;需要的朋友们下面随着小编来一起学习学习吧 最近在学web自动化&#xff0c;记录一下学习过程。…
阅读更多...
快速解决 Resource not accessible by integration

快速解决 Resource not accessible by integration

简介 最近好久没有写博客了&#xff0c;今天在写开源项目 python-package-template 的时候&#xff0c;正好遇到一个问题&#xff0c;记录一下吧。本文将介绍 Resource not accessible by integration 的几种解决方案。 也欢迎大家体验一下 python-package-template 这个项目&…
阅读更多...
黑白棋（Othello, ACM/ICPC World Finals 1992, UVa220）rust解法

黑白棋（Othello, ACM/ICPC World Finals 1992, UVa220）rust解法

你的任务是模拟黑白棋游戏的进程。黑白棋的规则为&#xff1a;黑白双方轮流放棋子&#xff0c;每次必须让新放的棋子“夹住”至少一枚对方棋子&#xff0c;然后把所有被新放棋子“夹住”的对方棋子替换成己方棋子。一段连续&#xff08;横、竖或者斜向&#xff09;的同色棋子被…
阅读更多...
SpringCloud: sentinel热点参数限制

SpringCloud: sentinel热点参数限制

一、定义controller package cn.edu.tju.controller;import com.alibaba.csp.sentinel.annotation.SentinelResource; import com.alibaba.csp.sentinel.slots.block.BlockException; import org.springframework.web.bind.annotation.PathVariable; import org.springframewo…
阅读更多...
Unity笔记--渲染顺序

Unity笔记--渲染顺序

目录 Unity中的渲染顺序一、Camera层二、透明类型&#xff08;先渲染不透明&#xff09;三、物体的SortingLayer&#xff08;越小越先渲染&#xff09;四、sorting order&#xff08;越小越先渲染&#xff09;五、RenderQueue &#xff08;越小越优先&#xff09;六、距离相机z…
阅读更多...
【算法设计zxd】第6章 回溯法

【算法设计zxd】第6章 回溯法

目录 6.1 回溯法的设计技术 &#xff1a; 四皇后问题 回溯法&#xff1a; 算法框架&#xff1a; 思考题&#xff1a; 回溯算法的适用条件 【例6-1】求满足下列不等式的所有整数解&#xff1a; 6.2回溯算法的经典例题 【例6-2】装载问题  问题分析 计算模型  算法设计与描…
阅读更多...
BookStack 详解及 Docker-Compose 部署

BookStack 详解及 Docker-Compose 部署

BookStack 是一款用于创建文档和文档管理的开源平台。它提供了一个直观且功能丰富的界面&#xff0c;可用于组织和管理各种文档&#xff0c;包括文档编写、编辑和共享。本文将介绍 BookStack 的核心功能&#xff0c;并展示如何使用 Docker-Compose 快速部署 BookStack。 BookS…
阅读更多...
Pika v3.5.1发布！

Pika v3.5.1发布！

Pika 社区很高兴宣布&#xff0c;我们今天发布已经过我们生产环境验证 v3.5.1 版本&#xff0c;https://github.com/OpenAtomFoundation/pika/releases/tag/v3.5.1 。 该版本不仅做了很多优化工作&#xff0c;还引入了多项新功能。这些新功能包括 动态关闭 WAL、ReplicationID…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023