CSS3过渡效果(css3 transition)

发布于:2014-09-22 15:45:09 - 查看:1222次

        CSS3的出现最引人注意的地方莫过于css动画(CSS Animation)了,而css3过渡(CSS Transition)让动画变的生动更逼真。今天就带大家一起来认识一下CSS Transition。

CSS3 Transitions

有了它,我们从一种效果转换到另一种效果而无需javascript或flash,我们只需一段CSS代码而已。

浏览器支持属性浏览器transition

Internet Explorer不支持过渡属性。

Firefox4需要前缀-moz-。

Chrome和Safari需要前缀-webkit-。

Opera需要前缀-o-。

它是如何工作?

CSS3的过渡效果,让一个元素从一种效果转换到另一种效果。

要做到这一点,你必须指定两件事:

  1. 指定要添加效果的CSS属性

  2. 指定效果的持续时间。

举例说明:

div{    transition:width 2s;    -moz-transition:width 2s;/* Firefox 4 */    -webkit-transition:width 2s;/* Safari and Chrome */    -o-transition:width 2s;/* Opera */}


注意:如果未指定动画延迟时间,过渡将没有任何效果,因为默认值是0。


鼠标放上去的时候,变换开始:

div:hover { width:300px; }

在哪里定义动画效果?

css3动画一般通过鼠标事件或者说状态定义动画,通常我们可以用CSS中伪类js中的鼠标事件来定义。

动态伪类                起作用的元素                    描述

:link                            只有链接                            未访问的链接

:visited                       只有链接                            访问过的链接

:hover                        所有元素                            鼠标经过元素

:active                        所有元素                            鼠标点击元素

:focus                         所有可被选中的元素           元素被选中

js的事件也可以,比如click,focus,mousemove,mouseover,mouseout等等

transition的基本语法:

css3动画通过transition属性和其他css属性(颜色,宽高,变形,位置等等)配合来实现。

transition的语法:

transition : [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*

当然这是简写,我们也可以完整的写:

transition-property : none | all | [ <IDENT> ] [ ',' <IDENT> ]*;

transition-duration : <time> [, <time>]*

transition-timing-function : ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*

transition-delay : <time> [, <time>]*

那些属性可以变换?

transition-property:要变化的属性,比如元素变宽则是width,文字颜色要变色这是W3C给出了一个可变换属性的列表:

                        CSS属性                                 改变的对象

                    background-color                         色彩

                        background-image                               只是渐变

                        background-position                         百分比,长度

                        border-bottom-color                               色彩

                        border-bottom-width                              长度

                        border-color                                  色彩

                        border-left-color                                       色彩

                        border-left-width                                      长度

                        border-right-color                                     色彩

                        border-right-width                                    长度

                        border-spacing                                          长度

                        border-top-color                                       色彩

                        border-top-width                                      长度

                        border-width                                             长度

                        bottom                                     百分比,长度

                        color                                             色彩

                        crop                                                          百分比

                        font-size                                   百分比,长度

                        font-weight                                    数字

                        grid-*                                                         数量

                        height                                       百分比,长度

                        left                                            百分比,长度

                        letter-spacing                                 长度

                        line-height                                      百分比,长度,数字

                        margin-bottom                                         长度

                        margin-left                                                长度

                        margin-right                                              长度

                        margin-top                                                长度

                        max-height                                         百分比,长度

                        max-width                                          百分比,长度

                        min-height                                         百分比,长度

                        min-width                                           百分比,长度

                        opacity                                           数字

                        outline-color                                              色彩

                        outline-offset                                             整数

                        outline-width                                             长度

                        padding-bottom                                        长度

                        padding-left                                               长度

                        padding-right                                             长度

                        padding-top                                               长度

                        right                                         百分比,长度

                        text-indent                                          百分比,长度

                        text-shadow                                     阴影

                        top                                            百分比,长度

                        vertical-align                                  百分比,长度,关键词

                        visibility                                                      可见性

                        width                                         百分比,长度

                        word-spacing                                        百分比,长度

                        z-index                                                       正整数

                        zoom                                                           数字

        几乎所有的有色彩、大小或位置等组件的CSS属性,包括许多新添加的CSS3属性, 都可以应用变换。一个值得注意的例外是box-shadow,不过部分浏览器还是对box-shadow添加了支持。

该取值还有个强大的“all”取值,表示上表所有属性;

除了以上属性外,当然还有css3中大放异彩的css3变形,比如放大缩小,旋转斜切,渐变等等。

动画时间

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

动画执行的计算方式

transition-timing-function :动画执行的计算方式,这里时间函数是令人崩溃的贝塞尔曲线,幸好css3提过了几个取值:

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)。如果你不想延迟,该值可省略。

重叠动画

经常会碰到同一元素会有多个动画同时执行的时侯,比如文字颜色和背景同时变化:

-webkit-transition: color .25s linear , background-color 1s linear;

和transform(变形)结合的一些动画

这时候transition-property建议取值为“all”;

典型的应用举例:

放大缩小:

#scale { -webkit-transition: all .3s ease-in-out; }

#scale:hover { -webkit-transform: scale(1.5); }

旋转:

#rotate { -webkit-transition: all 1s ease-in-out;}

#rotate:hover {-webkit-transform: rotate(720deg);}

转自:网络杂货铺