澳门新葡亰平台游戏网站CSS3中Transition属性详解以及示例分享

1、transition-property的语法[css]transition-property
:all(所有属性改变) || [attr] (指定要运动的样式)|| none(没有属性改变)

CSS3也有着非常强大的属性,那就是过渡——Transition。过渡——Transition在W3C的描述:“css的transition允许css的属性值在一定
的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。
”既然CSS3的过渡这么强大,下面我们就一点一点掌握它吧。  CSS3中的过渡Transition有四个中心属性:transition-property、transition-duration、transition-delay和transition-timing-
function。   一、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,也就是变换时是即时的。   三、transition-delay——
延迟时间  transition-delay是用来指定一个动画开始执行的时间,也就是说当改变元素属性值后多长时间开始执行transition效果,单位为s(秒)
,其使用和transition-duration极其相似,也可以作用于所有元素,包括:before和:after伪元素。
默认大小是”0″,也就是变换立即执行, 没有延迟。
  四、transition-timing-function——指定运动形式  transition-timing-function
: ease(逐渐变慢) | linear(匀速) | ease-in(加速) | ease-out(减速) |
ease-in-out(先加速然后减 速) |
cubic-bezier(该值允许你去自定义一个时间曲线)(number, number, number,
number>)   五、transition的综合写法[css]
元素选择器{transition:运动的样式 持续时间 运动形式 延迟时间;}
  六、transition的综合兼容写法   1、Mozilla内核[css]
元素选择器{-moz-transition:运动的样式 持续时间 运动形式 延迟时间;}
  2、Webkit内核[css] 元素选择器{-webkit-transition:运动的样式
持续时间 运动形式 延迟时间;}   3、Opera内核[css]
元素选择器{-o-transition:运动的样式 持续时间 运动形式 延迟时间;}
  4、W3C 标准[澳门新葡亰平台游戏网站,css] 元素选择器{transition:运动的样式 持续时间
运动形式 延迟时间;} 七、transition的小实例 CSS代码:

2、transition-property的属性值 (1)none:transition马上停止执行
(2)all:元素产生任何属性值变化时都将执行transition效果
(3)attr:指定要运动的样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
        #timings-demo {
            border: 1px solid #ccc;
            padding: 10px;
            height: 400px;
            width: 400px;
        }

        .box {
            width: 100px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            color: #fff;
            margin-bottom: 10px;
            -webkit-border-radius: 5px;
            -webkit-box-shadow: inset 0 0 5px rgba(102, 153, 0, 0.5);
        }
        /*逐渐变慢效果:*/

        #ease {
            background: #f36;
            -webkit-transition: all 5s ease 0.3s;
        }
        /*加速效果:*/

        #ease-in {
            background: #369;
            -webkit-transition: all 3s ease-in 0.5s;
        }
        /*减速效果:*/

        #ease-out {
            background: #636;
            -webkit-transition: all 5s ease-out 0s;
        }
        /*先加速然后减速效果:*/

        #ease-in-out {
            background: #3e6;
            -webkit-transition: all 1s ease-in-out 2s;
        }
        /*匀速效果:*/

        #linear {
            background: #999;
            -webkit-transition: all 6s linear 0s;
        }
        /*该值允许你去自定义一个时间曲线效果:*/

        #cubic-bezier {
            background: #6d6;
            -webkit-transition: all 4s cubic-bezier 1s;
        }
        /*hover状态下或单击click按钮后box产生属性变化*/

        #timings-demo:hover .box {
            -webkit-transform: rotate(360deg) scale(1.2);
            -webkit-border-radius: 25px;
        }
    </style>
    <body>
        <div id="timings-demo">
            <div id="ease" class="box">Ease</div>
            <div id="ease-in" class="box">Ease-in</div>
            <div id="ease-out" class="box">Ease-out</div>
            <div id="ease-in-out" class="box">Ease-in-out</div>
            <div id="linear" class="box">Linear</div>
            <div id="cubic-bezier" class="box">Cubic-bezier</div>
        </div>
    </body>
</html>

一、transition-property――指定要运动的样式

CSS3之过渡Transition就为大家介绍到这里了,CSS3之过渡Transition的神奇之处远不止上面这些,还可以做很多好玩的小东西。在今后
,想必CSS3之过渡Transition的应用会很广泛,掌握CSS3之过渡Transition可谓是当务之急。

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,也就是变换时是即时的。

三、transition-delay―― 延迟时间
transition-delay是用来指定一个动画开始执行的时间,也就是说当改变元素属性值后多长时间开始执行transition效果,单位为s(秒)

,其使用和transition-duration极其相似,也可以作用于所有元素,包括:before和:after伪元素。
默认大小是”0″,也就是变换立即执行,

没有延迟。

四、transition-timing-function――指定运动形式
transition-timing-function : ease(逐渐变慢) | linear(匀速) |
ease-in(加速) | ease-out(减速) | ease-in-out(先加速然后减

速) | cubic-bezier(该值允许你去自定义一个时间曲线)(number, number,
number, number)

五、transition的综合写法[css]元素选择器{transition:运动的样式
持续时间 运动形式 延迟时间;}

六、transition的综合兼容写法

1、Mozilla内核[css]元素选择器{-moz-transition:运动的样式 持续时间
运动形式 延迟时间;}

2、Webkit内核[css]元素选择器{-webkit-transition:运动的样式 持续时间
运动形式 延迟时间;}

3、Opera内核[css]元素选择器{-o-transition:运动的样式 持续时间 运动形式
延迟时间;}

4、W3C 标准[css]元素选择器{transition:运动的样式 持续时间 运动形式
延迟时间;}

实例效果:

复制代码 代码如下:a{transition:all .6s
ease-in-out;-webkit-transition:all .6s ease-in-out;-moz-transition:all
.6s ease-in-out;-o-transition:all .6s ease-in-out;-ms-transition:all .6s
ease-in-out;}

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图