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的补间动 ...
随机推荐
- sql(2) DISTINCT
SELECT DISTNCT 列名称 FROM 表名称SQL SELECT DISTINCT 语句在表中,可能会包含重复值. 关键词 DISTINCT 用于返回唯一不同的值. 语法:新建数据库 tes ...
- 利用VS 性能探查器 解决代码性能不高问题
VS2017 分析-性能探查器 选择你想分析的项目,选择你的分析工具,我这边是遇到了一个cpu爆满的问题 启动后需要点击一下记录cpu,否则会没有后续的分析忘了截图了,下面是出的分析报告,分析时间比较 ...
- case in
#!/bin/bash source /etc/profilesource ~/.bashrc #自己定义$version_number case $version_number in3.0.17) ...
- Java 基础 - instanceof关键字
instanceof 父类子类 结论: 子类 instanceof 父类 == true 父类 instanceof 子类 == false public class Test { public st ...
- 8-5接口测试用例设计与编写2 rest-assured
rest-assured 简约的接口测试DSL 支持xml json的结构化解析 支持xpath jsonpath gpath等多种解析方式 对Spring的支持比较前面 底层是httpclient ...
- LUOGU P2564 [SCOI2009]生日礼物 (队列+模拟)
传送门 解题思路 还是比较好想的,用一个队列,然后把所有点放在一起排个序,依次入队.每次检查队头元素的种类是否为当前入队元素种类,是的话就一直\(pop\),每次更新答案即可. 代码 #include ...
- 2015年MBA备考心得
2015年12月份山大MBA备考心得 我在去年的12月26日参加了山大的MBA招生考试,在今年3月底参加了山大的复试,并被山大录取.初试英语70分,综合部分151,总分在今年的山大考生中是第16名:复 ...
- VS2010-MFC(菜单:菜单及CMenu类的使用)
转自:http://www.jizhuomi.com/software/212.html 上一节讲的是VS2010的菜单资源,本节主要讲菜单及CMenu类的使用. CMenu类的主要成员函数 MFC为 ...
- Java-Maven-pom.xml-porject-parent:parent
ylbtech-Java-Maven-pom.xml-porject-parent:parent 1.返回顶部 1.Inherit defaults from Spring Boot <!-- ...
- 洛谷P1792——[国家集训队]种树
传送门:QAQQAQ 题意:$n$个点中选$m$个不相邻的点,使得这些点不相邻(1和n算相邻),求这些点的最大值 思路:这不是神仙题不是神仙题…… 刚看到这题觉得不难,好像只要贪心就可以了但贪心不知从 ...