一,什么是过渡(transition)?

1,transition 允许 CSS 元素的属性值在一定的时间区间内平滑地过渡。

2,可以在不使用 Flash 动画或 JavaScript 的情况下,在元素从一种样式变换为另一种样式时为元素添加效果。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变 CSS 的属性值。

二,常用属性;

1,transition 属性主要包含四个属性值:

1),用来指定当元素其中一个属性改变时执行transition效果,其主要有以下几个值:none(没有属 性改 变);all(所有属性改变)这个也是其默认值;indent(元素属性名);当其值为none时,transition马上停止执行,当指定为all 时,则元素产生任何属性值变化时都将执行transition效果;

2),transition-duration -- 定义过渡效果花费的时间,默认是 0;

3),transition-timing-function -- 允许根据时间的推进去改变属性值的变换速率,

transition-timing-function有6个可能值:

a、ease:(逐渐变慢)默认值

b、linear:(匀速),linear

c、ease-in:(加速)

d、ease-out:(减速),

e、ease-in-out:(加速然后减速)

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

4),transition-delay -- 用来指定一个动画开始执行的时间,也就是说当改变元素属性值后多长时间开始执行transition效果,默认是 0。

5),transition -- 简写属性,用于在一个属性中设置四个过渡属性。如需向多个样式添加过渡效果,请添加多个属性,由逗号隔开。

如:transition: <property> <duration> <animation type> <delay>

过渡transitioin的更多相关文章

  1. transtion:过渡动画

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Monaco; color: #4f5d66 } p.p2 { margin: 0.0px 0 ...

  2. CSS 3学习——transition 过渡

    以下内容根据官方规范翻译以及自己的理解整理. 1.介绍 这篇文档介绍能够实现隐式过渡的CSS新特性.文档中介绍的CSS新特性描述了CSS属性的值如何在给定的时间内平滑地从一个值变为另一个值. 2.过渡 ...

  3. 牛逼的css3:动态过渡与图形变换

    写css3的属性的时候,最好加上浏览器内核标识,进行兼容. -ms-transform:scale(2,4); /* IE 9 */ -moz-transform:scale(2,4); /* Fir ...

  4. 用js触发CSS3-transition过渡动画

    用js触发CSS3-transition过渡动画 经过这几天的工作,让我进一步的了解到CSS3的强大,原本许多需要js才能实现的动画效果,现在通过CSS3就能轻易实现了,但是CSS3也有自身的不足,例 ...

  5. 深入理解CSS过渡transition

    × 目录 [1]定义 [2]过渡属性 [3]持续时间[4]延迟时间[5]时间函数[6]多值[7]阶段[8]触发[9]API 前面的话 通过过渡transition,可以让web前端开发人员不需要jav ...

  6. CSS3之过渡及2D变换

    transition过渡 transition-duration:; 运动时间 transition-delay:; 延迟时间 transition-timing-function:; 运动形式 ea ...

  7. CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)

    CSS3边框: 1.CSS3圆角:border-radius  属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...

  8. CSS基础篇之背景、过渡动画

    background-origin(背景原点) 设置元素背景图片的原始起始位置.必须保证背景是background-repeat为no-repeat属性才能生效. background-origin: ...

  9. CSS学习笔记2-2d变换和过渡属性

    前言:今天又是一个周末,心情不错,趁着闲暇之余,把剩下来的CSS3学习的内容全部整理出来,练习用的源码也稍微整理了一下. 2D转换 transform:translate||rotate||scale ...

随机推荐

  1. 配置点云库PCL时遇到的问题

    配置PCL基本参照PCL中国官网教程 http://www.pclcn.org/study/shownews.php?lang=cn&id=34 配置点云库时遇到的问题(基于win8 64位, ...

  2. 项目中Zookeeper配置参数笔记

    ZooKeeper是以Fast Paxos算法为基础的,Paxos 算法存在活锁的问题,即当有多个proposer交错提交时,有可能互相排斥导致没有一个proposer能提交成功,而Fast Paxo ...

  3. ajax批删

  4. [Linux] IP绑定解释 BindIp

    一.缘由: 今天安装Mongodb,本来想限制只能内网或者某几台机器可以访问,看到配置文件有个net.bindIp选项, 就自以为是的认为,他可以像nginx那样限制访问来源IP,其实大错特错.这里配 ...

  5. Bash Shell 获取进程 PID

    转载地址:http://weyo.me/pages/techs/linux-get-pid/ 导读 Linux 的交互式 Shell 与 Shell 脚本存在一定的差异,主要是由于后者存在一个独立的运 ...

  6. Android屏幕适配全攻略 (转载)

    http://blog.csdn.net/jdsjlzx/article/details/45891551 https://github.com/hongyangAndroid/AndroidAuto ...

  7. Python基础语法,基本数据类型及相关操作

    ---恢复内容开始--- python文件 文件开头要有  #!/usr/bin/ python        --在linux中是告诉系统phthon的路径是在/usr/bin/ python目录下 ...

  8. JQuery easyui Datagrid 分页事件

    easyui是Jquery中的一个轻量级UI插件,提供了一些诸如window.datagrid.button等控件.现在主要说说Datagrid中分页控件的使用. easyui中可以单独添加分页pag ...

  9. ActiveMQ与WebSocket的结合应用

    前段时间无意之中看到了WebSocket这样东西,发现自己真的是火星了.早在11年就有的东西,一直都不知道. 研究了一番之后感觉还是比较好用的. 我很少做Socket开发,但是曾经由于项目的原因,用过 ...

  10. mysql常用单行函数

    一.大小写控制函数 LOWER(str)    将str的值全部置为小写字母 select LOWER('ABC'); --结果: LOWER('ABC') abc UPPER(str)    将st ...