当前位置: 萬仟网 > IT编程>网页制作>CSS > transition-timing-function 属性

transition-timing-function 属性

2019年04月13日 07:23  | 萬仟网IT编程  | 我要评论

以相同的速度从开始到结束的过渡效果:

div
{
transition-timing-function: linear;
-moz-transition-timing-function: linear; /* firefox 4 */
-webkit-transition-timing-function: linear; /* safari 和 chrome */
-o-transition-timing-function: linear; /* opera */
}

internet explorer 10、firefox、opera 和 chrome 支持 transition-timing-function 属性。

safari 支持替代的 -webkit-transition-timing-function 属性。

注释:internet explorer 9 以及更早版本的浏览器不支持 transition-timing-function 属性。

定义和用法:transition-timing-function 属性规定过渡效果的速度曲线。该属性允许过渡效果随着时间来改变其速度。

 

默认值: ease
继承性: no
版本: css3
javascript 语法: object.style.transitiontimingfunction="linear"

语法

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n);
描述
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 之间的数值。

提示:请在实例中测试不同的值,这样可以更好地理解它们的工作原理。

实例 1

为了更好地理解不同的函数值,请看下面带有五个不同值的五个不同的 div 元素:

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
/* firefox 4: */
#div1 {-moz-transition-timing-function: linear;}
#div2 {-moz-transition-timing-function: ease;}
#div3 {-moz-transition-timing-function: ease-in;}
#div4 {-moz-transition-timing-function: ease-out;}
#div5 {-moz-transition-timing-function: ease-in-out;}
/* safari and chrome: */
#div1 {-webkit-transition-timing-function: linear;}
#div2 {-webkit-transition-timing-function: ease;}
#div3 {-webkit-transition-timing-function: ease-in;}
#div4 {-webkit-transition-timing-function: ease-out;}
#div5 {-webkit-transition-timing-function: ease-in-out;}
/* opera: */
#div1 {-o-transition-timing-function: linear;}
#div2 {-o-transition-timing-function: ease;}
#div3 {-o-transition-timing-function: ease-in;}
#div4 {-o-transition-timing-function: ease-out;}
#div5 {-o-transition-timing-function: ease-in-out;}

实例 2

与上例相同,但通过 cubic-bezier 来规定速度曲线:

#div1 {transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* firefox 4: */
#div1 {-moz-transition-timing-function: cubic-bezier(0,0,0.25,1);}
#div2 {-moz-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-moz-transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-moz-transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-moz-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* safari and chrome: */
#div1 {-webkit-transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-webkit-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* opera: */
#div1 {-o-transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-o-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-o-transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-o-transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-o-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

  • VueRouter认识

    1、 什么是路由? 注意:作为vue的插件,需要单独引入js文件,且必须在vue.js之后引入。 <router-link to=“跳转路径”... [阅读全文]
  • 零基础:如何快速学习JavaScript,html+css技术

    前端开发要学的知识内容涉及的会很宽泛,虽然说主要是HTML、CSS和JavaScript这些基础知识点,但达妹今天想强调一下,学前端开发除了要学这些... [阅读全文]
  • Web基础--HTML、Css

    Web基础--HTML、Css

    一、Web项目(可跳过,直接从下一个标题开始) 1、Web项目: 指的是带网页的项目,通过浏览器可以访问的项目。比如:淘宝、天猫等。 2、Web项目... [阅读全文]
  • CSS是什么

    css是层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标... [阅读全文]
  • vue初级使用

    一、Vue是什么? Vue(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。采用自底向上增量开发的设计。Vu... [阅读全文]
  • HTML连载21-序选择器上

    HTML连载21-序选择器上

    解释CSS3 中新增的选择器中最具有代表性的就是序选择器,大致可以分为两类: (1)同级别的第几个(2)同类型的第几个 先写一个公共代码 1.选中同... [阅读全文]
  • 哪些技术会决定前端开发者的未来发展?

    哪些技术会决定前端开发者的未来发展?

    2019年下半年即将到来,上半年狂风骤雨般的裁员浪潮让每一位从业者背脊发凉,在经历了五六年黄金发展期之后,前端开发这个行业似乎也进入了转折点。 我一... [阅读全文]
  • 关于阿里 iconfont 的使用步骤

    关于阿里 iconfont 的使用步骤

    第一步: 在iconfont库中,找到你想要的图标,加入到购物车,再在购物车中将图标加入到你的项目中去 第二步: 在项目中,可以看到刚刚加入的图标,... [阅读全文]
  • flex 布局学习

    flex 布局学习 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候,看... [阅读全文]
  • web前端布局HTML+CSS

    web前端布局HTML+CSS

    1、W3C标准 万维网联盟(外语缩写:W3C)标准不是某一个标准,而是一系列标准的集合。网页主要由三部分组成:结构(Structure)、表现(Pr... [阅读全文]

◎已有 0 人评论

Copyright © 2019  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com