基础

语法：

transition-timing-function ： ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*

相关属性 ：transition-property， transition-duration， transition-delay

取值：
ease：
ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
linear：
linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
ease-in：
ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
ease-out：
ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
ease-in-out：
ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
cubic-bezier：
特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。（这个是真的吗？下面介绍）
说明：

此时间函数使用的是贝塞尔曲线。

在这里我主要是深入的理解cubic-bezier，根据里面 (x1, y1, x2, y2)可以画出这样的一个贝赛尔曲线，但是这条曲线是怎么看呢？ 可能有些刚接触的同学还是会比较难理解。

这条曲线就是代表变化过程的速率，Y轴就是代表变化过程的百分比，X轴代表时间的百分比，快慢就是通过看曲线在该点时间上的倾斜度，倾斜度越大变化越快。

动画技巧

最近想做一些缓冲的效果，然后重新试了一下这个贝赛尔，手册上说4个点必须在[0,1]内，不试白不试，我也不是一个听话的人。

然后测试了两个方案

cubic-bezier(-0.5,0.5, 1.5, 0.5)：（两个X的确是要再0-1范围内 不然transition失效）

cubic-bezier(0.5,-1, 0.5, 2)：（两个Y是可以不在0-1的范围内，最后得出缓冲效果）

<!doctype html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <style type="text/css">

        * {

            padding: 0;

            margin: 0;

        }

        body {

            width: 100%;

            height: 100%;

            position: absolute;

            text-align: center;

        }

        #box {

            position: absolute;

            width: 100px;

            height: 100px;

            left: 0px;

            top: 0px;

            right: 0;

            bottom: 0;

            margin: auto;

            background: red;

            -webkit-transform: scale(1);

            -webkit-transition: -webkit-transform 1s cubic-bezier(0.5, -1, 0.5, 2);

        }

        #box.change {

            -webkit-transform: scale(2);

        }

    </style>

</head>

<title>测试transition</title>

<body>

    <p>点击屏幕查看变化</p>

    <div id="box"></div>

</body>

<script>

    var box = document.querySelector('#box');

    document.querySelector('body').addEventListener("click", function() {

        if (box.className) {

            box.className = "";

        } else {

            box.className = "change";

        }

    }, false);

</script>

</html>

CSS3 transition-timing-function 深入理解和技巧的更多相关文章

  1. css3 transition属性

    最近打算学习css3知识,觉得css3写出来的效果好炫好酷,之前一直想要学习来着.可能之前的决心,毅力,耐心不够,所以想要重整起来,放下浮躁的心态,一步一个脚印,踏踏实实的来学习. 首先学习的是css ...

  2. css3 transition animation nick

    时光转眼即逝,又到周六了,今天写点某部分人看不起的css玩玩! 转换 转换属性transform: 浏览器前缀: -webkit-transform;-o-transform;-moz-transfo ...

  3. 【转】CSS3 transition规范的实际使用经验

    原文转自:http://blog.jobbole.com/56243/ 本篇文章主要讲述CSS3 transition规范和在不同浏览器之间的使用差异,关于具体解决方法或如何规避问题的意见可以参考另一 ...

  4. CSS3 transition规范的实际使用经验

    本篇文章主要讲述CSS3 transition规范和在不同浏览器之间的使用差异,关于具体解决方法或如何规避问题的意见可以参考另一篇非常有见地的文章,“All You Need to Know Abou ...

  5. css3 Transition动画执行时有可能会出现闪烁的bug

    css3 Transition动画执行时有可能会出现闪烁的bug,一般出现在开始的时候. 解决方法: 1.-webkit-backface-visibility: hidden; 2.-webkit- ...

  6. CSS3 transition 属性过渡效果 详解

    CSS3 transition 允许 CSS 元素的属性值在一定的时间区间内平滑地过渡.我们可以在不使用 Flash 动画或 JavaScript 的情况下,在元素从一种样式变换为另一种样式时为元素添 ...

  7. javascript中 (function(){})();如何理解?

    javascript中 (function(){})();如何理解? javascript中: (function(){})()是匿名函数,主要利用函数内的变量作用域,避免产生全局变量,影响整体页面环 ...

  8. CSS3 & transition & animation

    CSS3 & transition & animation https://developer.mozilla.org/en-US/docs/Web/CSS/transition-ti ...

  9. 制作动画平滑过渡效果：《CSS3 Transition》

    W3C标准中对css3的transition这是样描述的:“css的transition允许css的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发, ...

随机推荐

  1. vuex 的基本使用之Module

    Module 首先介绍下基本的组件化规则:你可以根据项目组件的划分来拆分 store,每个模块里管理着当前组件的状态以及行为,最后将这些模块在根 store 进行组合. const moduleA = ...

  2. “对外部(局部)变量的访问”是C语言函数指针的最大弱点

    1.“对外部(局部)变量的访问”是C语言函数指针的最大弱点 . #include <stdio.h> #include <stdlib.h> /* 结构体定义 */ struc ...

  3. day3_列表

    一.列表 列表也通常被称为list 数组 array 1.列表定义 使用方括号([])即可 alist = [123,'abc','def',666,True] 空列表的定义:alist = [] 或 ...

  4. adg的数据传输应用三大模式转换

    1.最大可用性模式(Maximum Availability) 1)该模式提供了仅次于"最大保护模式"的数据保护能力: 2)要求至少一个物理备库收到重做日志后,主库的事务才能够提交 ...

  5. AT3611 Tree MST 点分治+最小生成树

    正解:点分治+最小生成树 解题报告: 传送门! 然后这题麻油翻译,,,所以这边的建议是先说下题意呢亲 所以题意大概就是说,给一棵n个节点的树,树上每个点都有个权值,然后构造一个完全图,(u,v)之间连 ...

  6. 洛谷P4425 转盘 [HNOI/AHOI2018] 线段树+单调栈

    正解:线段树+单调栈 解题报告: 传送门! 1551又是一道灵巧连题意都麻油看懂的题,,,,所以先解释一下题意好了,,,, 给定一个n元环 可以从0时刻开始从任一位置出发 每次可以选择向前走一步或者在 ...

  7. Asp.net中"正在中止线程"错误解决方法

    项目中出现“正在中止线程”问题,百度后台发现,都是因为用到Response.End.Response.Redirect 或 Server.Transfer 方法. 原因: Response.End 方 ...

  8. Github上Laravel开源排行榜Star数31-60名

    Github上Laravel开源排行榜Star数31-60名,罗列所有 Laravel 开源扩展包,含 Github Star 数量,下载数量和项目简介.默认排序是按Star数量从多到少来排 31.c ...

  9. 数据库---mysql内置功能

    一.视图 简介: 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名称]即可获取结果集,可以将该结果集当做表来使用.使用视图我们可以把查询过 ...

  10. vs2005新建项目中没有ASP.NET WEB应用程序

    今天正准备使用vs 2005,发现根本打不开老师发过来的源代码Portal_Article.csproj文件,上网查了一下,好多人都说是是因为没有给vs 2005打补丁.我的新建项目里根本没有ASP. ...