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的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发, ...
随机推荐
- 如何理解vue.js组件的作用域是独立的
vue.js组件的作用域是独立,可以从以下三个方面理解: 1.父组件模板在父组件作用域内编译,父组件模板的数据用父组件内data数据:2.子组件模板在子组件作用域内编译,子组件模板的数据用子组件内da ...
- logback 配置详解
一:根节点<configuration>包含的属性: scan: 当此属性设置为true时,配置文件如果发生改变,将会被重新加载,默认值为true. scanPeriod: 设置监测配置文 ...
- 面向对象和面向过程的js版选项卡
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- 用VS开发PHP扩展
开发前准备工作: VS(我用的2013) Cygwin(下载地址:http://www.cygwin.com/) 搭载了php运行环境的IIS7.5 (用来测试) php编译后的程序和编译前的源码,我 ...
- LinuxMint 18 编译cm13.0 笔记
1.安装依赖文件 sudo apt--dev libesd0-dev git-core gnupg flex bison gperf build-essential zip curl zlib1g-d ...
- bzoj4498: 魔法的碰撞
首先,如果排列确定,那么就可以组合学解决了,不过排列数很多,显然不能枚举. 我们发现如果区间不能重叠的话,总长度减去所有区间长度就是能用的多余格子数. 然而相邻区间可以重叠较小区间一半的长度,因此这些 ...
- Alpha阶段第八次Scrum Meeting
情况简述 Alpha阶段第八次Scrum Meeting 敏捷开发起始时间 2016/10/31 00:00 敏捷开发终止时间 2016/10/32 00:00 会议基本内容摘要 跟助教进行了交流,明 ...
- 30秒懂SQL中的join（2幅图+30秒）
废话不多说,直接上图秒懂. t1表的结构与数据如下: t2表的结构与数据如下: inner join select * from t1 inner join t2 on t1.id = t2.id; ...
- margin和padding的区别
目前web2.0已经越来被人们认可,因为喜欢搞web开发的人员不得不硬着头皮去学习web2.0的标准,其中很重要的一条就是新的布局规则,div+css.以前基本上是用table布局的,这种传统的方式简 ...
- Arcgis 10.1安装
来源http://download.csdn.net/detail/l_j_kin/7310665#comment 测试有效,存着备用,转过来不自己写了 安装desktop 打开“注册机”,功能选择a ...