早期在Web中要实现动画效果,都是依赖于JavaScript或Flash来完成。但在CSS3中新增加了一个新的模块transition,它可以通过一些简单的CSS事件来触发元素的外观变化,让效果显得更加细腻。简单点说,就是通过鼠标的单击、获得焦点,被点击或对元素任何改变中触发,并平滑地以动画效果改变CSS的属性值。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

先来看transition-property属性

transition-property用来指定过渡动画的CSS属性名称,而这个过渡属性只有具备一个中点值的属性(需要产生动画的属性)才能具备过渡效果,其对应具有过渡的CSS属性主要有:

语法

transition: property duration timing-function delay;

transition-timing-function属性指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度,以及过渡期间的操作进展情况,其中要包括以下几种函数:

引http://www.imooc.com/code/1010

css3之 过渡的更多相关文章

  1. CSS3的过渡和转换

    CSS3的过渡和转换 1.过渡 什么是过渡呢?过渡通俗的来说就是从一个样式到另一个样式的逐渐转换改变的效果. 过渡的属性: 属性 描述 css transition 简写属性,用于在一个属性中设置4个 ...

  2. css3的过渡、动画、2D、3D效果

    浏览器的内核: 谷歌的内核是:webkit 火狐的内核是:gecko Ie的内核是:trident 欧鹏的内核是:presto 国内浏览器的内核:webkit css3针对同一样式在不同的浏览器的兼容 ...

  3. CSS3(2)--- 过渡(transition)

    CSS3(2)--- 过渡(transition) 一.概念 1.什么是过渡 通俗理解 是从一个状态 渐渐的过渡到 另外一个状态. 比如一个盒子原先宽度为100px,当鼠标点击时盒子的宽度变成200p ...

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

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

  5. CSS3之过渡Transition

    CSS3中的过渡Transition有四个中心属性:transition-property.transition-duration.transition-delay和transition-timing ...

  6. CSS笔记(十三)CSS3之过渡

    参考:http://www.w3school.com.cn/css3/css3_transition.asp 通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元 ...

  7. CSS3 transition过渡

    transition 属性是一个简写属性,用于设置四个过渡属性: transition: property duration timing-function delay; transition-pro ...

  8. css3 转换 过渡 及动画

    转换transform: 通过 CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸.您可以使用 2D 或 3D 转换来转换您的元素 2D转换属性: transform 向元素应用 2D 或 ...

  9. CSS3 Transition 过渡

    CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动 ...

随机推荐

  1. jboss未授权Getshell

    一.jboss未授权访问Getshell 1.jmx-console/HtmlAdaptor?action=inspectMBean&name=jboss.system:type=Server ...

  2. VGDB提示

    由于之前地址的版本在未安装.Net 4.0的电脑上安装会出现插件使用装载失败的问题,已更新,新地址为:http://pan.baidu.com/s/1xdnuD,此版本需要.Net 2.0.

  3. 查看ubuntu系统的版本信息

    显示如下 Linux version 4.10.0-28-generic (buildd@lgw01-12) linux内核版本号 gcc version 5.4.0 20160609 gcc编译器版 ...

  4. jquery实现文字由下到上循环滚动的实例代码

    <div id="oDiv"> <ul id="oUl"> <li>第1个li元素</li> <li> ...

  5. gradle 随记

    gradle项目下添加jar包 compile fileTree(dir: './src/main/resources/lib', include: '*.jar') 将jar包放到这个目录下./sr ...

  6. 删除除了特指的某几个文件外的所有文件的Linux指令

    栗子: 不删除 logs文件夹和credential文件夹 1.  rm -rf  !(logs|credential) 2.  ls | grep -v logs |grep -v credenti ...

  7. mkdir: Cannot create directory /file. Name node is in safe mode.

    刚刚在hadoop想创建一个目录的时候,发现报错了 具体信息如下: [hadoop@mini1 hadoop-2.6.4]$ hadoop fs -mkdir /file mkdir: Cannot ...

  8. 暴力贪心+预处理自动机——cf990E

    枚举每种灯管,然后找到代价最小的那种灯管 贪心策略:灯管从0开始向右放置,如果末尾是不能放置灯管的结点,那么要往回找到最近一个可以放置灯管的结点,在那里放置灯管 所以先预处理每个不能放置灯管的结点对应 ...

  9. inspect模块的使用

    一.介绍 inspect模块主要的四种用处: 1.对是否是模块.框架.函数等进行类型检测 2.获取源码 3.获取类或函数的参数信息 4.解析堆栈 二.使用 只写了2个自己用到的方法,方法太用,http ...

  10. POJ-2255-Tree Recovery-求后序

    Little Valentine liked playing with binary trees very much. Her favorite game was constructing rando ...