animation-timging-function 主要是控制css动画从开始到结束的速度。

linear:线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease:平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in:由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out:由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out:由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
step-start:等同于 steps(1, start)
step-end:等同于 steps(1, end)
steps(<integer>[, [ start | end ] ]?):接受两个参数的步进函数。第一个参数必须为正整数,指定函数的步数。第二个参数取值可以是start或end,指定每一步的值发生变化的时间点。第二个参数是可选的,默认值为end。
cubic-bezier(<number>, <number>, <number>, <number>):特定的贝塞尔曲线类型,4个数值需在[0, 1]区间内
 

这里主要介绍steps()

.heart{
background-image: url('images/heart-sprite.png');
-webkit-animation: animate 1s steps(28) infinite;
animation: animate 1s steps(28) infinite;
}
@keyframes animate {
from {background-position: 0 0;}
to {background-position: -2800px 0;}
}

steps() 设置间隔参数,可以实现分步过渡

第一个参数指定了时间函数中的间隔数量(必须是正整数)
第二个参数可选,接受 startend 两个值,指定在每个间隔的起点或是终点发生阶跃变化,默认为 end

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
Basic Support 6.0-9.0 2.0-4.0 4.0-42.0-webkit- 6.0-8.0-webkit- 15.0-29.0-webkit- 6.0-8.4-webkit- 2.1-3.0-webkit- #1 18.0-42.0-webkit-
10.0+ 5.0-15.0-moz- 43.0+ 9.0+ 30.0+ 9.0+ 4.0-40.0-webkit-
16.0+
  1. 在一些场景中会有错误行为
  2. 部分浏览器不支持伪元素动画,或者支持得不够好,尽可能不要利用伪元素来做动画

CSS3 animation-timing-function steps()的更多相关文章

  1. css3 animation 中的 steps

    steps Specifies a stepping function, described above, taking two parameters. The first parameter spe ...

  2. CSS3 Animation 帧动画 steps()

    @keyframes fn{ 0%{} 100%{} } CSS3的Animation有八个属性 animation-name :动画名 fn animation-duration:时间 1s ani ...

  3. 深入理解CSS3 Animation 帧动画 ( steps )

    作者:Aaron的博客 网址:http://www.cnblogs.com/aaronjs/p/4642015.html --------------------------------------- ...

  4. 浅谈CSS3动画的凌波微步--steps()

    背景 一日敲代码的我,得到一个需求:写一个10秒的倒计时. 用JavaScript定时器麻溜写完之后,恰好同事勇司机接完水.瞟了一眼,然后凑过来说,这个用CSS3也可以写,而且一行JavaScript ...

  5. CSS3 animation的steps方式过渡

    animation默认以ease方式过渡,它会在每个关键帧之间插入补间动画,所以动画效果 是连贯性的.除了ease,linear.cubic-bezier之类的过渡函数都会为其插入补间. 但有些效果不 ...

  6. CSS3 animation属性中的steps实现GIF动图(逐帧动画)

    相信 animation 大家都用过很多,知道是 CSS3做动画用的.而我自己就只会在 X/Y轴 上做位移旋转,使用 animation-timing-function 规定动画的速度曲线,常用到的 ...

  7. css3 animation 属性众妙

    转自:凹凸实验室(https://aotu.io/notes/2016/11/28/css3-animation-properties/) 本文不会详细介绍每个 css3 animation 属性(需 ...

  8. CSS3 animation(动画) 属性

    一.animation 1.CSS3 animation(动画) 属性 语法: animation: name duration timing-function delay iteration-cou ...

  9. 第四十一课:CSS3 animation详解

    animation是css3的另一个重要的模块,它成型比transition晚,吸取了Flash的关键帧的理念,实用性高. animation是一个复合样式,它可以细分为8个更细的样式. (1)ani ...

  10. css3 animation实现逐帧动画

    css3里面的animation属性非常强大,但是自己用的比较少,最近有次面试就刚好被问到了,趁现在有时间就对animation做一个小总结.同时实现一个逐帧动画的demo作为练习 animation ...

随机推荐

  1. 分享一个数据库工具DTOOLS

    整理电脑的时候发现一个好的工具——DTOOLS,他是我在09年左右写的一个数据库工具. 可以干什么呢? 我罗列一下: 1.全面的展示数据库字段情况 2. 迅速切换,展示数据库记录情况,不输语句,即点即 ...

  2. Windows7 中常用的一些DOS命令总结

    Windows7 中常用的一些DOS命令总结... ----------------------- -------------------------------------------- dos,是 ...

  3. sgu102 Coprimes

    102. Coprimes time limit per test: 0.25 sec. memory limit per test: 4096 KB For given integer N (1&l ...

  4. Hibernate注解-类级别注解

  5. Linux使用远程X Server显示图形

    背景 通常我们不希望在服务器上安装图形界面,但有时候有些程序需要图形界面,比如安装oracle的时候.此时,可以配置让Linux使用远程的X Server进行图形界面显示. 首先要明确的是Linux ...

  6. Ext:ComboBox实战

    var gsCombo = new Ext.form.ComboBox({ id:'combo', hiddenName:'value', fieldLabel:'下拉框', triggerActio ...

  7. 广度优先搜索(BFS)——迷宫的最短路径

    宽度优先搜索按照距开始状态由近到远的顺序进行搜索,因此可以很容易的用来求最短路径,最少操作之类问题的答案. 宽度优先搜索介绍(一篇不错的文章). 题目描述: 给定一个大小为N*M的迷宫.迷宫有通道和墙 ...

  8. adb 安装apk 报错:Failure [INSTALL_FAILED_ALREADY_EXISTS]

    遇到INSTALL_FAILED_ALREADY_EXISTS问题,直接通过adb install -r xxx.apk命令安装apk即可

  9. 极化码的matlab仿真(3)——SC译码(1)

    一个好码必须具备两个要素:可靠.高效. 高效的码要求码的编译方案都具有较低的复杂度.极化码出现后,Arikan本人提出使用SC译码方案来进行译码操作.SC全称successive cancellati ...

  10. spring整合mybatis错误:class path resource [config/spring/springmvc.xml] cannot be opened because it does not exist

    spring 整合Mybatis 运行环境:jdk1.7.0_17+tomcat 7 + spring:3.2.0 +mybatis:3.2.7+ eclipse 错误:class path reso ...