CSS3 -webkit-transition(属性渐变)

transition(属性渐变):"CSS Transitions allow property changes in CSS values to occur smoothly over a specified duration"

-webkit-transition：CSS属性(none|all|属性) 持续时间时间函数延迟时间

CSS属性(transition-property)：要变化的属性，比如元素变宽则是width，文字颜色要变色这是color；W3C给出了一个可变换属性的列表：除了以上属性外，还有css3中大放异彩的css3变形，比如放大缩小，旋转斜切，渐变等。该取值还有个强大的“all”取值，表示上表所有属性；

持续时间(transition-duration)：动画执行的时间，以秒为单位，比如0.1秒可以写成”0.1s”或者”.1s”，注意后面有个“s”单位。

时间函数(transition-timing-function)：

ease：逐渐慢下来，函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).

linear：线性过度,函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).

ease-in：由慢到快,函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).

ease-out：由快到慢, 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).

ease-in-out：由慢到快在到慢, 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

cubic-bezier：特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。

延迟时间(transition-delay)：在动作和变换开始之间等待多久，通常用秒来表示(比如, .1s)。如果你不想延迟，该值可省略。

定义CSS动画的位置:CSS伪类和JS事件

:link 未访问的链接
:visited 访问过的链接
:hover 鼠标悬停
:active 鼠标点击
:focus 元素选中

参考阅读：

http://www.qianduan.net/css-transitions-101.html

http://www.zhangxinxu.com/wordpress/?p=498

http://fis.io/css-3-hover-animations.html

CSS3 -webkit-transition(属性渐变)相关推荐

css3中transition属性详解
transform呈现的是一种变形结果,而Transation呈现的是一种过渡,通俗点说就是一种动画转换过程,如渐显.渐弱.动画快慢等.transition和transform是两种不同的动画模型. ...
CSS3的 transition:属性延续时间速率变化延迟时间
css的transition允许css的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值. transition ...
利用CSS3的transition属性模仿鼠标移入闪光灯效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
悬停渐变特效html,CSS3 transition属性实现hover渐变动画效果
CSS3 transition属性实现hover渐变动画效果我们知道许多网页动态特效都是由FLASH或JQUERY之类的JS特效库实现的实际上现在CSS3也能实现很多类似效果了,只是在各种浏览器中兼 ...
CSS3 -webkit-transition(属性渐变)
-webkit-transition:CSS属性(none|all|属性) 持续时间时间函数延迟时间 CSS属性(transition-property):要变化的属性,比如元素变宽则是wi ...
html图片自动淡出变化,用CSS3 transition属性实现淡入淡出轮播图
最近想自己写下轮播图,在网上发现一个网友用CSS transition属性实现的轮播,赶脚超简单哦,自己学习了后整理如下.(找不到原网址了-.-...就不贴了...) (如果不了解transition ...
css3 transition属性造成文字抖动
解决方法: transition属性后面接着写 transform:translateZ(0)
html 淡出淡入轮播图,用CSS3 transition属性实现淡入淡出轮播图
最近想本身写下轮播图,在网上发现一个网友用CSS transition属性实现的轮播,赶脚超简单哦,本身学习了后整理以下.(找不到原网址了-.-...就不贴了...) (若是不了解transition ...
css滤镜属性渐变_使用滤镜对CSS渐变进行动画处理
css滤镜属性渐变 Officially, gradients can't yet be animated. However, using CSS filters, you can animate t ...

CSS3 -webkit-transition(属性渐变)

延迟时间(transition-delay)：在动作和变换开始之间等待多久，通常用秒来表示(比如, .1s)。如果你不想延迟，该值可省略。

CSS3 -webkit-transition(属性渐变)相关推荐

最新文章

热门文章