css3 transition
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title></title> | |
| <style> | |
| .trans1{ | |
| -webkit-transition:0.5s ease; | |
| -moz-transition:0.5s ease; | |
| -webkit-transition-property:all; | |
| -moz-transition-property:all; | |
| position:absolute; | |
| left:10px; | |
| top:50px; | |
| height:100px; | |
| width:100px; | |
| background:#ef4900; | |
| color:white; | |
| } | |
| .trans2{ | |
| -webkit-transition:0.5s ease-in-out; | |
| -moz-transition:0.5s ease-in-out; | |
| -webkit-transition-property:width; | |
| -moz-transition-property:width; | |
| position:absolute; | |
| left:350px; | |
| top:50px; | |
| height:100px; | |
| width:100px; | |
| background:blue; | |
| color:yellow; | |
| } | |
| .trans3{ | |
| -webkit-transition:0.5s ease; | |
| -moz-transition:0.5s ease; | |
| -webkit-transition-property:height; | |
| -moz-transition-property:height; | |
| width:100px; | |
| height:100px; | |
| background:green; | |
| color:#ccc; | |
| position:absolute; | |
| left:780px; | |
| top:50px; | |
| } | |
| .trans1:hover{ | |
| width:300px; | |
| height:300px; | |
| } | |
| .trans2:hover{ | |
| width:300px; | |
| } | |
| .trans3:hover{ | |
| height:300px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="trans1">变换所有s属性</div> | |
| <div class="trans2">变换宽度属性</div> | |
| <div class="trans3">变换高度属性</div> | |
| <!-- transform呈现是一种变形结果，而transition呈现是一种过渡，通俗一点就是一种动画转化过程，如渐显，减弱、动画快慢等，transform，和transition是两种不同动画模型； | |
| 1、transition的过渡属性： | |
| transition属性是一个间歇属性，用于设置四个过渡属性； | |
| 语法 | |
| transition：property duration timing-function delay； | |
| 值描述transition-property规定设置过渡效果的css属性名称。 | |
| transition-duration规定完成过渡效果需要的时间秒，或毫秒； | |
| transition-timing-function规定速度效果的速度曲线。 | |
| transition-delay定义过渡效果何时开始 | |
| transition-property； | |
| 值： | |
| all：显示指对所有元素； | |
| none:表示没有元素； | |
| ident:制定css属性列表； | |
| 注：请始终设置transition-duration属性，否则时长为0；就不会产生过渡效果，transform与transition此时效果一样 | |
| transition：过渡属性名称 过渡时间 过度模式 ； | |
| transition-timing-function的五种值； | |
| 1：ease逐渐变慢； | |
| 2：liner：匀速； | |
| 3：ease-in:缓慢开始（加速）； | |
| 4：ease-out：缓慢结束（减速）； | |
| 5：ease-in-out：缓慢开始，缓慢结束（先加速，或减速）； | |
| 6：cubic-bezier 贝赛尔曲线（mathewlein.com/easer）;--> | |
| </body> | |
|
</html> |
css3 transition的更多相关文章
- css3 transition animation nick
时光转眼即逝,又到周六了,今天写点某部分人看不起的css玩玩! 转换 转换属性transform: 浏览器前缀: -webkit-transform;-o-transform;-moz-transfo ...
- css3 transition属性
最近打算学习css3知识,觉得css3写出来的效果好炫好酷,之前一直想要学习来着.可能之前的决心,毅力,耐心不够,所以想要重整起来,放下浮躁的心态,一步一个脚印,踏踏实实的来学习. 首先学习的是css ...
- 【转】CSS3 transition规范的实际使用经验
原文转自:http://blog.jobbole.com/56243/ 本篇文章主要讲述CSS3 transition规范和在不同浏览器之间的使用差异,关于具体解决方法或如何规避问题的意见可以参考另一 ...
- CSS3 transition规范的实际使用经验
本篇文章主要讲述CSS3 transition规范和在不同浏览器之间的使用差异,关于具体解决方法或如何规避问题的意见可以参考另一篇非常有见地的文章,“All You Need to Know Abou ...
- css3 Transition动画执行时有可能会出现闪烁的bug
css3 Transition动画执行时有可能会出现闪烁的bug,一般出现在开始的时候. 解决方法: 1.-webkit-backface-visibility: hidden; 2.-webkit- ...
- CSS3 transition 属性过渡效果 详解
CSS3 transition 允许 CSS 元素的属性值在一定的时间区间内平滑地过渡.我们可以在不使用 Flash 动画或 JavaScript 的情况下,在元素从一种样式变换为另一种样式时为元素添 ...
- CSS3 & transition & animation
CSS3 & transition & animation https://developer.mozilla.org/en-US/docs/Web/CSS/transition-ti ...
- css3 transition动画
CSS3: 一.transition: <property> <duration> <animation type> <delay> eg: .div{ ...
- css3 transition effect(其它效果)
http://blog.csdn.net/jerryvon/article/details/8755548 整理了一些其它动画,用的模板为flip模板,只不过CSS3不同 /************* ...
- 制作动画平滑过渡效果：《CSS3 Transition》
W3C标准中对css3的transition这是样描述的:“css的transition允许css的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发, ...
随机推荐
- 【MVVM】模型认识理解，
MVVM:模型-视图-视图模型(Model-View-ViewModel) 注意:它是双向绑定的 源:http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mv ...
- 并查集(union-find)算法
动态连通性 . 假设程序读入一个整数对p q,如果所有已知的所有整数对都不能说明p和q是相连的,那么将这一整数对写到输出中,如果已知的数据可以说明p和q是相连的,那么程序忽略p q继续读入下一整数对. ...
- Map工具系列-05-添加业务参数工具
所有cs端工具集成了一个工具面板 -打开(IE) Map工具系列-01-Map代码生成工具说明 Map工具系列-02-数据迁移工具使用说明 Map工具系列-03-代码生成BySQl工具使用说明 Map ...
- sql语句的单双引号问题
$current_account_url='<a class="mini-button" iconcls="icon-edit" onclick=&quo ...
- IntelliJ IDEA 常用设置讲解
说明 IntelliJ IDEA 有很多人性化的设置我们必须单独拿出来讲解,也因为这些人性化的设置让我们这些 IntelliJ IDEA 死忠粉更加死心塌地使用它和分享它. 常用设置 IntelliJ ...
- hdu2929 Bigger Is Better
题意 给出n根木棍,要你拼一个最大的数,并且这个数是m的倍数. 题解 显然越长的数越大.设\(dp[i][j]\)表示用i根木棍并且\(mod m = j\)的最大长度. 我们很容易想出dp方程,再用 ...
- 如何查看Maven项目中的jar包依赖树情况
对于开发人员,我想大家对于Maven应该不会陌生吧,如何在一个Maven项目中对这个项目中所引用的第三方jar包有个直观的了解呢? 其实实现很简单,只需要借助于Maven的一条命令,如下所示: mvn ...
- Description Resource Path Location Type Java compiler level does not match the version of the instal
解决办法 在项目上右键Properties->Project Facets,在打开的Project Facets页面中的Java下拉列表中,选择相应版本. 有可能是java1.6 改成java6 ...
- php5 数据类型
一.PHP主要有一下几种数据类型 String(字符串), Integer(整型), Float(浮点型), Boolean(布尔型), Array(数组), Object(对象), NULL(空值) ...
- Go - 函数/方法 的 变参
变参 本质上就是一个切片.只能接收一个或多个同类型参数,且 必须放在参数列表的 尾部. func test(s string, a ...int) { fmt.Printf("%T, %v\ ...