css【详解】steps()函数

简介: css【详解】steps()函数
steps(number, position)
 
  • number 整数值,表示把动画分成了多少段。
  • position 可选参数,表示动画跳跃执行是在时间段的开始还是结束。

—— start 在时间段的开头处跳跃

—— end 在时间段的结束处跳跃

动画效果见 https://demo.cssworld.cn/new/5/4-7.php


—— step-start等同于steps(1,start),表示“一步到位”;

—— step-end等同于steps(1,end)或者steps(1),表示“延时到位”。

动画效果见 https://demo.cssworld.cn/new/5/4-8.php

以下新兴的关键字兼容性不佳,了解即可

  • jump-start:动画开始时就发生跳跃,和start关键字的表现一样。
  • jump-end:动画结束时发生跳跃,和end关键字的表现一样。
  • jump-none:动画开始时和结束时都不发生跳跃,然后中间部分等分跳跃。
  • jump-both:动画开始时和结束时都发生跳跃。

目录
相关文章
|
4天前
|
前端开发 JavaScript
如何在 CSS 变量中使用函数?
【10月更文挑战第28天】虽然CSS变量本身不能像传统编程语言中的函数那样直接进行复杂的运算和逻辑处理,但通过CSS预处理器、`calc()` 函数以及与JavaScript的结合,可以在很大程度上实现类似函数的功能,提高CSS样式的灵活性和可维护性,满足各种不同的页面设计和交互需求。
|
22天前
|
安全 前端开发 开发者
CSS3 中 calc()、constant() 和 env() 函数的使用指南
在现代网页设计中,CSS3 的 calc()、constant() 和 env() 函数为开发者提供了强大的工具,帮助实现灵活和响应式的布局。本文将深入探讨这三个函数的定义、用法以及最佳实践,特别是如何利用 calc() 进行动态计算、constant() 的历史背景,以及 env() 在处理设备安全区域中的应用。通过本文,读者将能够更好地理解并运用这些函数,提升网页设计的灵活性与用户体验。
16 0
|
4月前
|
前端开发
css【详解】cubic-bezier()函数
css【详解】cubic-bezier()函数
85 2
|
5月前
|
前端开发 文件存储 Python
【已解决】Flask当中render_template函数使用过程当中css文件无法正常渲染
【已解决】Flask当中render_template函数使用过程当中css文件无法正常渲染
|
6月前
|
移动开发 JavaScript 前端开发
原生JavaScript+CSS实现计算器(简单的介绍一下eval函数)
原生JavaScript+CSS实现计算器(简单的介绍一下eval函数)
62 0
|
前端开发 JavaScript
html中href和src的区别?CSS 中哪些属性可继承,哪些不可以?创建函数的几种方式?
href:href 是 Hypertext Reference 的缩写,表示超文本引用。用来建立当前元素和文档之间的链接。常用的有:link、a。
|
前端开发 数据可视化
漏刻有时数据可视化Echarts组件开发(1):报警状态组件CSS代码及封装函数
漏刻有时数据可视化Echarts组件开发(1):报警状态组件CSS代码及封装函数
67 0
|
JSON 前端开发 JavaScript
CSS样式表在javascript函数中的写法
CSS样式表在javascript函数中的写法
64 0
|
编解码 前端开发 安全
常用的css函数有哪些,你都用过吗?
css 的函数有哪些?他们都有什么作用?你认得哪些?你用过哪些?今天我就带你们一起来了解一下 css 的函数吧!
213 0
|
前端开发 安全 测试技术
深入了解 CSS 中的 :where() 和 :is() 函数
深入了解 CSS 中的 :where() 和 :is() 函数
深入了解 CSS 中的 :where() 和 :is() 函数