CSS3中的transition
W3C标准中对CSS3的transition是这样描述的:
CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击,获得焦点,被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。简洁点说就是当元素从一种样式变换为另一种样式时为元素添加效果。
transition主要有***四个属性***,那这四个属性怎么记呢?变换的话总得有变换的属性名吧,知道是要哪个属性变,还得有变换的持续时间吧,持续时间里还得有变换速率吧,是先快后慢呢还是先慢后快呢;最后呢,一般动画都会有个延迟选项吧;所以就是**属性**,**时间**,**速率**,**延迟**
这四个属性中又分别有各自的属性值。
来看第一个,属性,它有三个属性值:<br />
分别是none(没有属 性改 变);all(所有属性改变)这个是默认值;indent(元素属性名);当其值为none时,transition停止执行,当指定为all 时,则元素产生all属性值在变化时都将执行transition效果,ident是可以指定元素的某一个属性值。这里ident指定的属性值有一点需要注意的是,不是所有的属性改变都会触发transition动作效果,具体有哪些CSS属性类型可以实现transition这样的持续在某一段时间内进行动画变换,W3C官方给出有列表,[这里](http://www.w3.org/TR/css3-transitions/#properties-from-css-)。
第二个时间就很好理解了,表示转换过程持续的一段时间。
第三个速率是最有意思的一个属性值了:<br />它表示在这段时间内随着时间推进属性值改变时的的变换速率。而这个属性呢有7个属性,分别是ease(逐渐变慢);linear(匀速);ease-in(加速);ease-out(减速);ease-in-out(加速然后减速);cubic-bezier(自定义时间曲线);前面6个值其实就是选取的自定义时间曲线的某一个点。CSS3中这条曲线是按照[贝塞尔曲线](http://baike.baidu.com/link?url=TPrH0xPK4dERFnDo6vGUJ9Rj2zW_yHyUoXvXb50maxU0-sb7nugcFnqUq3LKYPze7HxoHtPgvIsbW_eO69cStK)进行计算的,从百科中我们可以看到关于这条曲线的各种计算公式啊,以及通过它牵扯出来的一门学科,叫计算机矢量图形学。但在这里我们更关心的是它的意义:无论是直线或曲线都能在**数学**上予以描述。也就是我们只需要知道cubic-bezier这个属性有(x1,y1,x2,y2)这四个点,通过这四个点可以画出一条曲线,这条曲线呢,表现的就是属性值的一个变化速率,至于这条曲线背后的数学知识就不要纠结啦。说到这里,就不得不提一下chrome浏览器的在调试CSS动画时的方便了,如下图:我们可以通过上方的那个小球就能即时看到动画效果,并且拖动中间两个点来自定义速率:
最后一个延迟也很好理解,就是指延迟多少时间后再进行属性值改变
当我们想要同时改变几个属性值的时候,我们可以用all,比如
```transition: all 0.6s ease-in-out;```
可是这样的话,所有属性值的改变时间,速率,延迟都是一样的,如果想要这几个不同的属性改变时的时间,速率,延迟不一样,也可以分别指定,如:
```transition: width 0.6s ease-in-out 1s,height 0.6s ease-in-out;```
CSS3中的transition的更多相关文章
- css3中动画(transition)和过渡(animation)详析
css3中动画(transition)和过渡(animation)详析
- css3 中的transition和transform
我以前始终都把他搞反,或者是混淆.现在可以稍微小结下. Transition:CSS3中处理动画的一个样式:只涉及动画起始和终止两个状态.如果涉及到一个动画的各个时间或者状态,那就必须要用到的另外一个 ...
- CSS3中的Transition属性详解
w3c标准中对CSS3的transition这是样描述的:“CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发, ...
- CSS3中的Transition属性详解(贝赛尔曲线)
transition语法: transition : [<'transition-property'> || <'transition-duration'> || <'t ...
- CSS3中transform,transition和animation的简单介绍和使用方法演示样例
transform是一个属性,本质跟width,height是一样的,加上transform也就是为类添加一个变换属性. transition是一个属性.它是用来控制过渡效果的,由于用transfor ...
- css3中transition属性详解
css3中通过transition属性可以实现一些简单的动画过渡效果~ 1.语法 transition: property duration timing-function delay; transi ...
- css3中的动画效果
css3中的animation属性动画效果代码如下: <!DOCTYPE html> <html lang="en"> <head> <m ...
- css3中关于伪类的使用
目标: css中after伪类,last-child伪类的使用.以及部分css3的属性. 过程: 在制作导航时.常常会遇到在每个li后面加入一个切割符号,到最后一个元素的时候,切割符就会去掉的一种效果 ...
- css3中transition和animation的回调处理
弱鸡最近在准备面试,网上找了一些题,发现一些基础题也完全答不好(┬_┬)看来还是要再接再励啊w(゚Д゚)w 言归正传,今天的主题是CSS3中的动画回调处理,这里动画执行完毕后触发的事件是transit ...
随机推荐
- Core Animation 负责将bitmap绑定提交到 GPU-[CALayer _display]
Core Animation 负责将bitmap绑定提交到 GPU: Core Animation一头连着CPU,一头连着GPU. ZSTest`-[ZSDTCoreTextCell drawRect ...
- Pyhton学习——Day51
model(数据库模型)------ORM----- 表与表之间的关系(两张表) 一对多 多对多 一对一 ORM------object relation mapping python的类 class ...
- C# 基础复习 一 数据类型
数据类型分为:值类型和引用类型 值类型:byte.short/char.int.long.float.double.decimal.enum.struct 引用类型:string.object.int ...
- 移动端和pc端的判断,不同端做不同的处理
1.通过js判段是pc端还是移动端 function browserRedirect() { var type = ""; var sUserAgent = navigator.u ...
- CSS3属性之text-overflow:ellipsis,指定多行文本中任意一行显示...
对于text-overflow:ellipsis,文本超出部分显示...,但要实现这个效果,却有一些必备条件,如下: div{ overflow:hidden; white-space:nowrap; ...
- CSS3特效——六面体
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- mysql_5.6.24_winx64 安装
1.将zip压缩文件放在一个文件夹中 2.将路劲加入path环境变量 3.注册系统服务 在C:\windows下建立一个ini文件 1 2 3 4 5 6 7 8 9 10 11 12 [client ...
- 洛谷——P2483 [SDOI2010]魔法猪学院
https://www.luogu.org/problem/show?pid=2483 题目描述 iPig在假期来到了传说中的魔法猪学院,开始为期两个月的魔法猪训练.经过了一周理论知识和一周基本魔法的 ...
- nyoj 1189 yougth和他的朋友们 (DP)
题目:pid=1189" target="_blank">nyoj 1189 yougth和他的朋友们 这题目是14年北京赛区的原题.讲题的时候说有三种解法,我们是 ...
- c#将List<T>转换成DataSet
/// <summary> /// List<T> 转换成DataSet /// </summary> /// &l ...