css3-过渡transtition

原创 2015年07月09日 14:03:16

语法

transition :property duration timing-function delay;
参数:property指定对哪呢个css属性值进行过渡

          none(没有属性改变);all(所有属性改变)这个也是其默认值;indent(元素属性名如color)
          duration:规定过渡需要的时间(单位s/ms)
          timing-function:规定速度效果(匀速,变速)

          1、ease:(逐渐变慢)默认值,ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).

          2、linear:(匀速),linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).

          3、ease-in:(加速),ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).

          4、ease-out:(减速),ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).

          5、ease-in-out:(加速然后减速),ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

          6、cubic-bezier:(该值允许你去自定义一个时间曲线) (x1, y1, x2, y2)四个值特定于曲线上点P1和点 P2。所有值需在[0, 1]区域内,否则无效。
          delay:定义效果何时开始

注:几个transition的声明串在一起,用逗号(“,”)隔开

      transition-delay与transition-duration的值都是时间,浏览器会根据先后顺序决定,第一个可以解析为 transition-duration第二个为transition-delay

 

兼容性


版权声明:本文为博主原创文章,未经博主允许不得转载。

CSS3-过渡

一. CSS3过渡介绍 1. transition-property 介绍 2. transition-duration介绍 3. tansition-timing-function介绍 4. tra...
  • qq_29548433
  • qq_29548433
  • 2017年07月15日 19:34
  • 122

CSS3-过渡属性,CSS3-动画

CSS3-过渡属性 transition: property duration timing-function delay; transition-property:过渡属性的名称...
  • EternallyLin
  • EternallyLin
  • 2016年05月22日 12:10
  • 138

10、CSS3-过渡属性

01、CSS3-过渡属性 transition: property duration timing-function delay; transition-property:过渡属性的名称 transi...
  • chuipaopao163
  • chuipaopao163
  • 2016年08月07日 09:15
  • 337

css3-过渡动画效果

代码效果就是:当鼠标放在正方形块上后,两秒之后开始进行动画效果:旋转360度,并且长宽变为200:`div{ width: 100px; height: 100px; b...
  • RedGuy_anluo
  • RedGuy_anluo
  • 2016年01月07日 14:51
  • 335

css3-过渡笔记

css3过渡transition   A:------------------------     功能:    属性值在一定的时间区间内平滑的过渡(在鼠标单击、获得焦点、被点击或对元素任何...
  • xulanshan33
  • xulanshan33
  • 2016年09月03日 19:34
  • 104

css3-宽度 位置 等过渡属性

/*------------------------------宽度过渡-----------------------------------*/ /**/ /*.b...
  • gyq04551
  • gyq04551
  • 2016年11月21日 20:30
  • 232

CSS3-用过渡实现气泡效果

要想做一张泡泡浮动的效果图,首先要准备一张泡泡图片 实现代码如下 v { 过渡动画 .div{ ...
  • qq_29548433
  • qq_29548433
  • 2017年07月20日 13:55
  • 475

CSS3 线性渐变背景的过渡效果

对于background:-webkit-radial-gradient这种复杂的背景,只能给opacity添加过渡效果,当做背景图片处理...
  • ruangong1203
  • ruangong1203
  • 2016年12月27日 19:04
  • 1541

viewpager过渡页

viewpager的用法 一、谷歌官方给我们提供的一个兼容低版本安卓设备的软件包,里面包囊了只有在安卓3.0以上可以使用的api。而viewpager就是其中之一! 二、现在只要做个AP...
  • bobo8945510
  • bobo8945510
  • 2016年10月06日 11:13
  • 489

CSS3之过渡及过渡事件

CSS3之过渡及过渡事件 1.      Transition过渡   l  transition-property  要运动的样式  (all || [attr] ||none) l  tr...
  • u013267266
  • u013267266
  • 2016年05月02日 14:56
  • 2657
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3-过渡transtition
举报原因:
原因补充:

(最多只允许输入30个字)