css3过渡动画速率用到的是三阶贝塞尔曲线,曲线有四个点,p0,p1,p2,p3

有几个属性:

  linear 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。
  ease 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。
  ease-in 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。
  ease-out 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。
  ease-in-out 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。
  cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

其中p0(0,0),p3(1,1)是固定点,p1(x1,y1),p2(x2,y2)是操作点;

依次连接p0p1p2p3,假设p0p1上有一动点A,p1p2上有一动点B,p2p3上有一动点C,有p0A/p0p1=p1B/p1p2=p2C/p2p3=t

确定A,B,C点后,依次连接ABC,假设AB上有一动点E,BC上有一动点F,有AE/AB=BF/BC=t

确定E,F点后,依次连接EF,假设EF上有一动点P,有EP/EF=t

点P的移动轨迹就是所得结果,cubic-bezier(n,n,n,n)中的四个参数为(x1,y1,x2,y2)

想看效果图可以参考:https://www.jianshu.com/p/55099e3a2899

想实际操作可以参考:https://cubic-bezier.com

css3贝塞尔曲线过渡动画速率——transition-timing-function:cubic-bezier(n,n,n,n)的更多相关文章

  1. CSS3 贝塞尔曲线实现

    cubic-bezier 曲线是 css3 动画的一个重要基石.另一个为 steps (ease 等都是 cubic-bezier 的特殊形式),css3 中的 cubic_bezier 曲线限制了首 ...

  2. css3贝塞尔曲线

    http://yisibl.github.io/cubic-bezier/#.17,.67,.94,.53 前言 在了解 cubic-bezier 之前,你需要对 CSS3 中的动画效果有所认识,它是 ...

  3. CSS过渡动画之transition

    O(∩_∩)O~ 这两天在看看CSS的相关内容,关于transition动画感觉很有意思,分享一下. CSS负责给html加效果,自然少不了各种动画,今天介绍一下transition. 概述 看一段比 ...

  4. Vue过渡动画运用transition

    vue的过渡动画,主要是transition标签的使用,配合css动画实现的.官方文档css过渡 通过点击事件来切换show的值来改变显示的文本,下面的css通过进入离开时的在匀速状态下xxs(秒)下 ...

  5. CSS平滑过渡动画:transition

    <html> <head> <link href="http://cdn.bootcss.com/twitter-bootstrap/3.0.2/css/boo ...

  6. JS模拟CSS3动画-贝塞尔曲线

    一.什么是贝塞尔曲线 1962年,法国工程师皮埃尔·贝塞尔(Pierre Bézier),贝塞尔曲线来为为解决汽车的主体的设计问题而发明了贝塞尔曲线.如今,贝赛尔曲线是计算机图形学中相当重要的一种曲线 ...

  7. CSS3 三次贝塞尔曲线(cubic-bezier)

    例子:transition:all 1s cubic-bezier(.21,.2,.65,.1) 最近在看animation模块,其中animation-timing-function 和 trans ...

  8. 基于 React 实现一个 Transition 过渡动画组件

    过渡动画使 UI 更富有表现力并且易于使用.如何使用 React 快速的实现一个 Transition 过渡动画组件? 基本实现 实现一个基础的 CSS 过渡动画组件,通过切换 CSS 样式实现简单的 ...

  9. css3-12 transition+css或transform实现过渡动画

    css3-12 transition+css或transform实现过渡动画 一.总结 一句话总结:首先要设置hover后的效果,然后在transition里面指定执行哪些样式和执行时间为多长. 1. ...

随机推荐

  1. 其他综合-Kickstart无人值守安装系统CentOS 7

    Kickstart无人值守安装系统CentOS 7 1.概述 1.1 关于PXE Preboot Execution Environment 翻译过来就是预启动执行环境:简称 PXE :传统安装操作系 ...

  2. toString的本质 以及String.valueOf()

    Object可以用toString转为字符串. Object.toString(); 但char[]不行,得用valueOf. String.valueOf(char[]); 如果用toString, ...

  3. django中添加新的filter

    给模板传递了一个字典,却发现无法在模板中直接通过key获得value. 查阅资料后,这个问题可以通过添加自定义的filter来解决. 首先在app目录下创建一个templatetags目录,并在它的下 ...

  4. Linux下JDK中文字体乱码

    java生成图片的时候用到字体,但是liunx系统没有这些字体需要把C:\Windows\Fonts 上传到/usr/local/jdk1.8.0_171/jre/lib/fonts 重启tomcat ...

  5. JavaMap常用操作

    判断key值是否存在 map.containsKey("youkey") 根据key修改value值 map.put("youkey","you ne ...

  6. djang小项目过程中的小问题 01(django中的configrarion配置、django自带命名规范)

    不知道为什么,明明照着做,但是我就会遇到一些错误问题,但是我觉着自己生下来就是解决问题的. ##1. 第一个是在django运行时,没有配置configration, 这个时候我添加一个django ...

  7. stack栈、heap堆的说明图

    上面的两幅图是stm32系列的,但是基本原理可以通用的.

  8. python爬虫之获取页面script里面的内容

    这是网页上的script 我要获取的是00914这个数字  直接使用正则表达式即可 运行结果: 源码: import re from bs4 import BeautifulSoup from url ...

  9. 字符串s倒序输出

    编程将字符串s倒序输出,要求利用函数递归实现. 输入格式要求:"%s" 提示信息:"input your string:\n" 输出格式要求:"%c& ...

  10. Appium入门指南 - 环境搭建和Case编写

    本文档将详细介绍如何搭建 Appium 的运行环境,以及如何编写一个简单的 UI 自动化测试用例.其中,也会穿插讲解一些 Appium 的基本知识.关于 Appium 的更多信息,大家可以查看官方文档 ...