css3之 过渡
早期在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之 过渡的更多相关文章
- CSS3的过渡和转换
CSS3的过渡和转换 1.过渡 什么是过渡呢?过渡通俗的来说就是从一个样式到另一个样式的逐渐转换改变的效果. 过渡的属性: 属性 描述 css transition 简写属性,用于在一个属性中设置4个 ...
- css3的过渡、动画、2D、3D效果
浏览器的内核: 谷歌的内核是:webkit 火狐的内核是:gecko Ie的内核是:trident 欧鹏的内核是:presto 国内浏览器的内核:webkit css3针对同一样式在不同的浏览器的兼容 ...
- CSS3(2)--- 过渡(transition)
CSS3(2)--- 过渡(transition) 一.概念 1.什么是过渡 通俗理解 是从一个状态 渐渐的过渡到 另外一个状态. 比如一个盒子原先宽度为100px,当鼠标点击时盒子的宽度变成200p ...
- 牛逼的css3:动态过渡与图形变换
写css3的属性的时候,最好加上浏览器内核标识,进行兼容. -ms-transform:scale(2,4); /* IE 9 */ -moz-transform:scale(2,4); /* Fir ...
- CSS3之过渡Transition
CSS3中的过渡Transition有四个中心属性:transition-property.transition-duration.transition-delay和transition-timing ...
- CSS笔记(十三)CSS3之过渡
参考:http://www.w3school.com.cn/css3/css3_transition.asp 通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元 ...
- CSS3 transition过渡
transition 属性是一个简写属性,用于设置四个过渡属性: transition: property duration timing-function delay; transition-pro ...
- css3 转换 过渡 及动画
转换transform: 通过 CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸.您可以使用 2D 或 3D 转换来转换您的元素 2D转换属性: transform 向元素应用 2D 或 ...
- CSS3 Transition 过渡
CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动 ...
随机推荐
- 多线程的基本概念和Delphi线程对象Tthread介绍
多线程的基本概念和Delphi线程对象Tthread介绍 作者:xiaoru WIN 98/NT/2000/XP是个多任务操作系统,也就是:一个进程可以划分为多个线程,每个线程轮流占用CPU运行 ...
- sql stuff拼接字符串的用法
要把图2显示成图1的方法:要用到stuff函数,并且图1显示的时间有所截断. 图2sql,只是很普通的sql ), SKSJ, )=' order by SKSJ 图1sql,用了stuff拼接 ), ...
- POJ-1502-MPI Maelstrom-dijkstra+输入处理
BIT has recently taken delivery of their new supercomputer, a 32 processor Apollo Odyssey distribute ...
- Caused by: java.lang.NoSuchMethodError: org.hibernate.engine.spi.SessionFactoryImplementor.getProperties()Ljava/util/Properties;
报错信息 Error starting ApplicationContext. To display the auto-configuration report re-run your applica ...
- git -- 项目开发最常用操作记录
官方Git - Book https://git-scm.com/book/zh/v2 ------------------------------git配置以及公钥生成--------------- ...
- JDK1.8中文CHM下载 -- java开发搬运工
网上一番查找后,发现csdn有,但是要收费,之后从某地找到热心网友的分享,现贡献给大家! 不啰嗦,直接上货! 链接:https://pan.baidu.com/s/1b6Wg7LiUZsFSYGsvR ...
- 牛客暑期第六场G /// 树形DP 最大流最小割定理
题目大意: 输入t,t个测试用例 每个测试用例输入n 接下来n行 输入u,v,w,树的无向边u点到v点权重为w 求任意两点间的最大流的总和 1.最大流最小割定理 即最大流等于最小割 2.无向树上的任意 ...
- Java后端WebSocket的Tomcat实现(转)
文章摘要随着互联网的发展,传统的HTTP协议已经很难满足Web应用日益复杂的需求了.近年来,随着HTML5的诞生,WebSocket协议被提出,它实现了浏览器与服务器的全双工通信,扩展了浏览器与服务端 ...
- grep 查看前后几行和参数匹配
如果在只是想匹配模式的上下几行,grep可以实现. grep -5 'parttern' inputfile //打印匹配行的前后5行 grep -C 5 'parttern' inputfile ...
- 05.Mybatis动态sql
1.IF标签 需求:根据条件查询用户 在Mapper.xml中编写 <!-- 根据sex和username查询user --> <select id="findbySexa ...