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:动画开始时和结束时都发生跳跃。

目录
相关文章
|
2天前
|
前端开发
css【详解】cubic-bezier()函数
css【详解】cubic-bezier()函数
7 2
|
16天前
|
前端开发 文件存储 Python
【已解决】Flask当中render_template函数使用过程当中css文件无法正常渲染
【已解决】Flask当中render_template函数使用过程当中css文件无法正常渲染
16 1
|
2月前
|
移动开发 JavaScript 前端开发
原生JavaScript+CSS实现计算器(简单的介绍一下eval函数)
原生JavaScript+CSS实现计算器(简单的介绍一下eval函数)
39 0
|
12月前
|
前端开发 JavaScript
html中href和src的区别?CSS 中哪些属性可继承,哪些不可以?创建函数的几种方式?
href:href 是 Hypertext Reference 的缩写,表示超文本引用。用来建立当前元素和文档之间的链接。常用的有:link、a。
|
12月前
|
前端开发 数据可视化
漏刻有时数据可视化Echarts组件开发(1):报警状态组件CSS代码及封装函数
漏刻有时数据可视化Echarts组件开发(1):报警状态组件CSS代码及封装函数
45 0
|
12月前
|
JSON 前端开发 JavaScript
CSS样式表在javascript函数中的写法
CSS样式表在javascript函数中的写法
47 0
|
编解码 前端开发 安全
常用的css函数有哪些,你都用过吗?
css 的函数有哪些?他们都有什么作用?你认得哪些?你用过哪些?今天我就带你们一起来了解一下 css 的函数吧!
189 0
|
前端开发 安全 测试技术
深入了解 CSS 中的 :where() 和 :is() 函数
深入了解 CSS 中的 :where() 和 :is() 函数
深入了解 CSS 中的 :where() 和 :is() 函数
|
前端开发 JavaScript
css3的attr函数使用,加载unicode图标
阿里矢量图标在项目中都用使用,通常一般我们引入css使用iconfont,或者我们使用svg加载图标,亦或我们可以使用Unicode,除了第一种与第二种
199 0
css3的attr函数使用,加载unicode图标