-webkit-transition(属性渐变)
-webkit-transition:CSS 属性(none|all | 属性) 持续时间 时间函数 延迟时间
CSS 属性(transition-property): 要变化的属性, 比如元素变宽则是 width, 文字颜色要变色这是 color;W3C 给出了一个可变换属性的列表 http://www.w3.org/TR/css3-transitions/ : 除了以上属性外, 还有 css3 中大放异彩的 css3 变形 http://www.css88.com/archives/2168 , 比如放大缩小, 旋转斜切, 渐变等. 该取值还有个强大的 "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 元素选中
transition
css 的 transition 允许 css 的属性值在一定的时间区间内平滑地过渡. 这种效果可以在鼠标单击, 获得焦点, 被点击或对元素任何改变中触发, 并圆滑地以动画效果改变 CSS 的属性值.
一, transition-property-- 指定要运动的样式
1,transition-property 的语法
- [css]
- transition-property :all(所有属性改变) || [attr] (指定要运动的样式)|| none(没有属性改变)
2,transition-property 的属性值
(1)none:transition 马上停止执行
(2)all: 元素产生任何属性值变化时都将执行 transition 效果
(3)attr: 指定要运动的样式
二, transition-duration
transition-duration 是指定元素转换过程的持续时间, 单位为秒(s).transition-duration 可以作用于所有元素, 包括: before 和: after
伪元素. 其默认值是 0, 也就是变换时是即时的.
来源: http://www.bubuko.com/infodetail-2734907.html