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的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发, ...
随机推荐
- 为什么 "auto a = 1;" 在C语言中可以编译通过？
参照:这里 这让我想起之前看的一部书, int i; 其实是等价与 auto int i; 表示为局部变量 这应该与static是相对的吧?
- c#JS调用
using MSScriptControl; using System; using System.Collections.Generic; using System.Reflection; usin ...
- MySQL架构优化实战系列1：数据类型与索引调优全解析
一.数据类型优化 数据类型 整数 数字类型:整数和实数 tinyint(8).smallint(16).mediuint(24).int(32).bigint(64) 数字表示对应最大存储位数,如 ...
- 泛型-List<T>
声明一个int类型的泛型对象 List<int> list=new List<int>(); list.Add(44);//不用装箱 int i1=list[0];//也不会发 ...
- Opencv 完美配置攻略(Win8.1 + Opencv 2.4.8 + VS 2013)
- Ubuntu下sphinx使用
Ubuntu安装 参考文档 进入sphinx mysql -h0 -P9306 查询 select * from 索引名
- 【原】十张javascript思维导图
下面附上十张javascript思维导图,如果把里面的内容全部掌握,那就是高手了.思维导图提供给我们一个整体的知识体系,也可以说是一种工具,废话不多说,上图: 1.javascript数据类型 2.j ...
- python学习笔记-（十二）scoket编程基础
socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄,应用程序通常通过"套接字"向网络发出请求或者应答网络请求. socket起源于Un ...
- 自然语言25_nltk.book
测试NLTK数据包 导入nltk.book包中所有的东西: 能使用以下函数的是nltk.text.Text对象 from nltk.book import * text1.concordance(&q ...
- 【转载】Arcengine效率探究之二——属性的更新
文转载自hymyjl2010<Arcengine效率探究之二——属性的更新> 修改一批要素的属性有多种方法,当数据量较大时,若选择不当可能会大大影响速度. 一.IRowBuffer 方 ...