一、timing-function: steps()

一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线。

1)一个项目中的实例

先来看看左边加了steps和右边没加的区别。左边的是一锤一锤的,右边会出现影子。

【注意下面这个demo在firefox中不能执行,只能在chrome中执行,因为我动画的是“background-image”属性】

代码如下,我只把关键的几个代码贴出来了,详细的可以查看这里

.btn-pay {
  background: url(t_btn-pay.png) no-repeat -30px;
  animation: pay-interval 0.5s steps(1) infinite;
}
.btn-pay2 {
  animation: pay-interval 0.5s linear infinite;
}
@keyframes pay-interval {
  from {
    background-image: url(t_btn-pay.png);
  }
  30% {
    background-image: url(t_btn-pay-active.png);
  }
  to {
    background-image: url(t_btn-pay.png);
  }
}

2)参数说明

语法如下:

a. 第一个参数指定了时间函数中的间隔数量(必须是正整数),这个间隔数量作用用于两个关键帧之间,也就是form与30%之间、30%与to之间。

b. 第二个参数可选,接受 start 和 end 两个值,指定在每个间隔的起点或是终点发生阶跃变化,默认为 end。

我在CSS中设置了1(这个例子中start与end区别不大),也就是一步一步动画,而如果不设置,那其实里面就会有多步操作,就会出现影子。

国外有篇文章中写了个例子,可以区分这两个值的区别,demo链接可以点击这里,具体的原理可以在网上搜索。

.contain-car {
  animation: drive 4s steps(4, end) infinite;
}
.contain-car-2 {
  animation: drive 4s steps(4, start) infinite;
}

3)通过sprite图片制作动画

通过合成的图片,再设置个间隔数,就能出现动画了,例如下面的这张loading图片,点击查看在线demo

.loading {
  animation: loading-rotate 1s steps(12) infinite;
}

二、animation-direction

animation-direction 定义是否应该轮流反向播放动画,选项有normal、alternate(交替)、reverse(反向)等。

1)一个项目中的实例

左边的抖动明显要流畅很多,而右边的抖动在完成100%以后就直接跳回到0%的状态。

代码如下,我只把关键的几个代码贴出来了,详细的可以查看这里

.img1 {
  animation: tel-rotate 1s linear infinite alternate;
}
.img2 {
  animation: tel-rotate 1s linear infinite;
}
@keyframes tel-rotate {
  from {
    -webkit-transform: rotate(-20deg);
    transform: rotate(-20deg);
  }
  to {
    -webkit-transform: rotate(40deg);
    transform: rotate(40deg);
  }
}

2)CSS3动画帧数计算器

在做这个抖动的时候,一开始没有注意到这个属性,后面查到有这么一个CSS3动画帧数计算器

并注意到这个里面来回滚动的动画非常流畅。关键帧的计算是蛮有讲究的,里面还有些算法了,网上相关资料也蛮多的。

三、timing-function: cubic-bezier()

自定义贝塞尔曲线函数,通过设置四个参数,可以控制动画的速度。

平时使用的ease、linear、ease-in等,其实也是输入了四个参数后得到的结果。

1)一个网上的实例

通过自定义可以组织比较复杂的合成动画,例如球跌落到地上的情景,点击查看在线代码

当我看到这个实例的时候,我是蛮震惊的,我一直以为这种动画需要与JavaScript配合才行。

图片来自于《网页动画的十二原则》,这篇文章从国外翻译过来的,里面的原则是迪士尼动画总结的。

2)贝塞尔辅助工具

easings.net这个网页上,可以查看各种缓动的效果。

cubic-bezier.com中,可以在线制作,拖动红色或蓝色的那两个点,可以自动显示相应的参数。

参考资料:

CSS3 timing-function: steps() 详解

How to Use steps() in CSS Animations

CSS3动画帧数科学计算法

网页动画的十二原则

CSS3动画几个平时没注意的属性的更多相关文章

  1. CSS3动画--过渡效果

    CSS3动画--过渡效果 transition                               设置四个过渡属性 transition-property          过渡的名称 tr ...

  2. 原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd 以及 css 过渡 transition无效

      上图的 demo 主要讲的 是 css transition的过渡回调函数transitionend事件: css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画 ...

  3. JavaScript - 基于CSS3动画的实现

    在痛苦的IE8时代,所有的动画都只能基于自己计算相关动画属性,开定时器setTimeout/setInterval轮询动画任务. 而肩负重任的HTML5,早已注意到了日益增强的动画,随着HTML5的降 ...

  4. css3动画简介以及动画库animate.css的使用

    在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...

  5. CSS3动画:YouTube的红色激光进度条

    本文只是讨论和实现了动画效果,并未将动画与页面实际下载关联,有朋友们问如何应用,可以使用现成的一些插件比如这个,这个,还有这个. 之前一篇文章<CSS3 动画一瞥>简单介绍了CSS3动画相 ...

  6. CSS3 动画效果带来的bug

    css3 动画效果比如transition:all 2s linear;这种用来计算及时的物体坐标的话会带来一定的问题 比如把一个DIV从A点移动到B点.JS为DIV.style.left=B; 但是 ...

  7. jQuery插件css3动画模拟confirm弹窗

    相比浏览器自带的alert.confirm,能力所及,我更喜欢所有的东西都是自定义:首先在head标签(当然喜欢其他地方自己看着办)内引入插件样式表和js.<link rel="sty ...

  8. 如何使用js捕获css3动画

    如何使用js捕获css3动画 css3动画功能强大,但是不像js,没有逐帧控制,但是可以通过js事件来确定任何动画的状态. 下面是一段css3动画代码: #anim.enable{ -webkit-a ...

  9. css3动画使用技巧之—JQ配合css3实现轮播之animation-delay应用

    <!DOCTYPE html> <html> <head> <title>css3动画使用技巧之—JQ配合css3实现轮播之animation-dela ...

随机推荐

  1. tomcat linux下的部署安装

    Tomcat在Linux上的安装与配置 转自http://blog.csdn.net/gyming/article/details/36060843     以下使用的Linux版本为: Redhat ...

  2. 大三那年在某宝8块钱买的.NET视频决定了我的职业生涯

    前言 谨以此文献给那些还在大学中迷茫的莘莘学子们! 韩愈在<师说>中提出了作为师者应该做的三件事:传道.授业.解惑. 1.传道:培养学生的道德观 2.授业:传授学生专业技能 3.解惑:解答 ...

  3. 问题记录:JavaFx 鼠标滑轮滚动事件监听!

    问题描述: 在listview的item里面添加鼠标拖拽排序功能.代码如下: setOnMouseDragged(event -> { //设定鼠标长按0.3秒后才可拖拽 防止误操作 isCan ...

  4. JS刷新父窗口的几种方式&lt;转&gt;

    常用的有:   window.opener.location.reload();    和  window.location.reload(); 浮层内嵌iframe及frame集合窗口,刷新父页面的 ...

  5. [Google Guava]学习--缓存cache

    适用性 缓存在很多情况下非常实用.例如,计算或检索一个值的代价很高,并且对同样的输入需要不止一次获取值的时候,就应当考虑使用缓存. Guava Cache与ConcurrentMap很相似,但也不完全 ...

  6. POJ 1496 Word Index

    组合数学....和上一题是一样的.... Word Index Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 4303 Acce ...

  7. HTML5基础

    一.HTML(超文本标记语言) 1>就是文本,由浏览器负责将它解析成具体的网页内容 2>由N个标签(节点.元素.标记)组成 二.常见HTML标签 1>标题标签:h1.h2.h3.h4 ...

  8. 推荐--《Android深入浅出》

    基本信息 书名:Android深入浅出 作者:张旸 著 页数: 661 出版社: 机械工业出版社; 第1版 (2014年4月17日) 语种: 简体中文 ASIN: B00JR3P8X0 品牌: 北京华 ...

  9. Java集合框架(四)

    Collections    集合框架的工具类    着重讲解以下方法: 1.sort(): 1º根据元素的自然顺序对指定列表按升序进行排序,列表中的所有元素都必须实现comparable接口. pu ...

  10. Oracle中删除重复的经典方案

    DELETE FROM Personnel WHERE ROWID < (SELECT MAX(P1.ROWID) FROM Personnel AS P1 WHERE P1.dup_id = ...