CSS3-transition,过渡实例
过渡:transition【由Webkit内核浏览器提出】
通过CSS实现元素从一个样式渐变成另一个种。
IE不支持,其他需后缀。
transition:transition-property/duration/timing-function/delay的缩写。
transition : <'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, ... ];
transition-property:变换的属性名。
none、all、一个或多个<property>(逗号分隔)。
transition-duration:持续时间。单位s或ms。
<time>默认为0。无过渡效果。
transition-timing-function:过渡效果的速度曲线。
linear:匀速,等于cubic-bezier(0,0,1,1)
ease:慢快慢,等于cubic-bezier(0.25,0.1,0.25,1)
ease-in:以慢开始,等于cubic-bezier(0.25,0.1,0.25,1)
ease-out:以慢结束,等于cubic-bezier(0,0,0.25,1)
ease-in-out:以慢开始和结束,等于cubic-bezier(0.42,0,0.58,1)
cubiz-bezier(n,n,n,n):【三次贝塞尔】在cubiz-bezier函数中定义自己的值,0~1。
DEMO =>
transition-delay:指定开始时间。默认0。
逗号分隔多个属性的延迟时间。
-moz-transition: color 0.3s ease-out 2s;
CSS3-transition,过渡实例的更多相关文章
- CSS3 transition过渡
transition 属性是一个简写属性,用于设置四个过渡属性: transition: property duration timing-function delay; transition-pro ...
- CSS3 Transition 过渡
CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动 ...
- 【CSS3】transition过渡和animation动画
转自:http://blog.csdn.net/XIAOZHUXMEN/article/details/52003135 写在前面的话: 最近写css动画发现把tansition和animation弄 ...
- CSS3(2)--- 过渡(transition)
CSS3(2)--- 过渡(transition) 一.概念 1.什么是过渡 通俗理解 是从一个状态 渐渐的过渡到 另外一个状态. 比如一个盒子原先宽度为100px,当鼠标点击时盒子的宽度变成200p ...
- IT兄弟连 HTML5教程 CSS3属性特效 transition过渡
CSS3的transition允许css的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值. transitio ...
- 【转】CSS3 transition规范的实际使用经验
原文转自:http://blog.jobbole.com/56243/ 本篇文章主要讲述CSS3 transition规范和在不同浏览器之间的使用差异,关于具体解决方法或如何规避问题的意见可以参考另一 ...
- CSS3 transition规范的实际使用经验
本篇文章主要讲述CSS3 transition规范和在不同浏览器之间的使用差异,关于具体解决方法或如何规避问题的意见可以参考另一篇非常有见地的文章,“All You Need to Know Abou ...
- CSS3 transition 属性
transition是css3中新添加的特性,在W3C标准中是这样描述的:“css的transition允许css的属性值在一定的时间内从一个状态平滑的过渡到另一个状态.这种状态可以在鼠标单击.获得焦 ...
- CSS 3学习——transition 过渡
以下内容根据官方规范翻译以及自己的理解整理. 1.介绍 这篇文档介绍能够实现隐式过渡的CSS新特性.文档中介绍的CSS新特性描述了CSS属性的值如何在给定的时间内平滑地从一个值变为另一个值. 2.过渡 ...
- css3 transition animation nick
时光转眼即逝,又到周六了,今天写点某部分人看不起的css玩玩! 转换 转换属性transform: 浏览器前缀: -webkit-transform;-o-transform;-moz-transfo ...
随机推荐
- 用Dictionary替换switch case
用switch case处理一个很长的判断,例如56个民族01代表汉族,02代表藏族,03代表壮族...,当传入数字想获取民族名称时就得写56个case,当传入民族获取背后的数字时,又得再写56个ca ...
- PHP-----循环结构
for循环语句 打印金字塔 完整的金字塔 //打印金字塔 $n=25; for($i=1;$i<=$n;$i++){ //空格循环 for($k=1;$k<=$n-$i;$k++){ ec ...
- 《BI那点儿事》数据流转换——派生列
派生列转换通过对转换输入列应用表达式来创建新列值. 表达式可以包含来自转换输入的变量.函数.运算符和列的任意组合. 结果可作为新列添加,也可作为替换值插入到现有列. 派生列转换可定义多个派生列,任何变 ...
- (五)AOS编程
一.LOG AOS_LOG(index) //断言,会打印出断言传进来的值 AOS_ASSERT(0); //只会打印断言位置 return AOS_FAIL; //返回错误,函数 ...
- 使用Android点击按钮跳转页面
1.首先新建一个Android工程,命名为MyApp(名字可以自己随意起); 2.以原有的MainActivity.java文件为登录界面,然后在src文件中的包上面右击选择New目录下的Other中 ...
- Deep Learning 4_深度学习UFLDL教程:PCA in 2D_Exercise(斯坦福大学深度学习教程)
前言 本节练习的主要内容:PCA,PCA Whitening以及ZCA Whitening在2D数据上的使用,2D的数据集是45个数据点,每个数据点是2维的.要注意区别比较二维数据与二维图像的不同,特 ...
- 【更新】【封装必备】封装辅助 - 清理&优化工具 For Win7(IT天空会员专版)
https://www.itsk.com/thread-353560-1-4.html nqawen 发表于 2015-7-9 17:26:37 本帖最后由 Amz 于 2015-11-25 10 ...
- 解决WCF的service端无法使用泛型的问题
思路是将其序列化(比较笨的方法……) 1.引入Newtonsoft.json.dll 2.服务端序列化:return JsonConvert.SerializeObject(result); 3.客户 ...
- Objective-C( Foundation框架 一 数组(NSMutableArray))
NSMutableArray:可变数组 NSMutableArray是NSArray的子类 创建NSMutableArray数组对象 添加数组元素: // 创建数组 NSMutableArray *a ...
- iOS开发多线程篇—创建线程
iOS开发多线程篇—创建线程 一.创建和启动线程简单说明 一个NSThread对象就代表一条线程 创建.启动线程 (1) NSThread *thread = [[NSThread alloc] in ...