您的位置：首页 > Web前端 > css > 正文

CSS3 transition过渡效果

更多时间：2015-7-5 类别：Web前端浏览量：1705

CSS3 transition过渡效果

CSS3 transition过渡效果

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果

要实现这一点，必须规定两项内容：

1、规定您希望把效果添加到哪个 CSS 属性上

2、规定效果的时长，如果时长未规定，则不会有过渡效果，因为默认值是 0。

一、CSS3中transition的定义

transition: property duration timing-function delay;

transition 属性是一个简写属性，主要用于设置四个过渡属性：

值	描述
transition-property	规定设置过渡效果的 CSS 属性的名称。
transition-duration	规定完成过渡效果需要多少秒或毫秒。默认是 0。
transition-timing-function	规定速度效果的速度曲线。默认是 "ease"。
transition-delay	定义过渡效果何时开始。默认是 0。

二、CSS3中transition属性介绍

1、transition-property

transition-property是用来指定当元素其中一个属性改变时执行transition效果。

其主要有以下几个值：

(1)、none(没有属性改变)；

(2)、all（所有属性改变）这个也是其默认值；

(3)、indent（元素属性名）；

当其值为none时，transition马上停止执行，当指定为all 时，则元素产生任何属性值变化时都将执行transition效果，ident是可以指定元素的某一个属性值。

常用应用过渡的元素

CSS Property	What Changes
background-color	Color
background-image	Only gradients
background-position	Percentage, length
border-bottom-color	Color
border-bottom-width	Length
border-color	Color
border-left-color	Color
border-left-width	Length
border-right-color	Color
border-right-width	Length
border-spacing	Length
border-top-color	Color
border-top-width	Length
border-width	Length
bottom	Length, percentage
color	Color
crop	Rectangle
font-size	Length, percentage
font-weight	Number
grid-*	Various
height	Length, percentage
left	Length, percentage
letter-spacing	Length
line-height	Number, length, percentage
margin-bottom	Length
margin-left	Length
margin-right	Length
margin-top	Length
max-height	Length, percentage
max-width	Length, percentage
min-height	Length, percentage
min-width	Length, percentage
opacity	Number
outline-color	Color
outline-offset	Integer
outline-width	Length
padding-bottom	Length
padding-left	Length
padding-right	Length
padding-top	Length
right	Length, percentage
text-indent	Length, percentage
text-shadow	Shadow
top	Length, percentage
vertical-align	Keywords, length, percentage
visibility	Visibility
width	Length, percentage
word-spacing	Length, percentage
z-index	Integer
zoom	Number

2、transition-duration

transition-duration: time;

transition-duration是用来指定元素转换过程的持续时间，取值：<time>为数值，单位为s（秒）,可以作用于所有元素，包括:before和:after伪元素。默认值是 0，意味着不会有效果。

3、transition-timing-function

值	描述
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	(逐渐变慢)，规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	(加速)，规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	(减速)，规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	(加速然后减速)，规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	(该值允许你去自定义一个时间曲线)，在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

4、transition-delay

transition-delay: time;

transition-delay是用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition效果，取值：<time>为数值，单位为s（秒），它的使用和transition-duration极其相似，也可以作用于所有元素，包括:before和:after伪元素。默认大小是”0″，也就是变换立即执行，没有延迟。

有时我们不只改变一个CSS效果的属性,而是想改变两个或者多个CSS属性的transition效果，那么我们只要把几个transition的声明串在一起，用逗号（“，”）隔开，然后各自可以有各自不同的延续时间和其时间的速率变换方式。但需要值得注意的一点：transition-delay与 transition-duration的值都是时间，所以要区分它们在连写中的位置，一般浏览器会根据先后顺序决定。

三、CSS3 transition过渡效果实例

HTML 代码复制



<style>...
.trans_list {...}{
    width: 10%;
    height: 64px;
    margin:10px 0;
    background-color:#486AAA;
    color:#fff;
    text-align:center;
}
.ease {...}{
    transition: all 4s ease;
}
.ease_in{...}{
    transition: all 4s ease-in;
}

.trans_box:hover{...}{
    margin-left:89%;
    background-color:#BECEEB;
    color:#333;
    border-radius:25px;        
    transform: rotate(360deg);                
}
</style>

<li id="transBox" class="trans_box">
    <li class="trans_list ease">ease</li>
    <li class="trans_list ease_in">ease-in</li>
    <li class="trans_list ease_out">ease-out</li>
    <li class="trans_list ease_in_out">ease-in-out</li>
    <li class="trans_list linear">linear</li>
</li>

HTML 代码复制


<!DOCTYPE html>
<html>
<head>
<style>... 
li
{...}{
width:100px;
height:100px;
background:yellow;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s; /**//* Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /**//* Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /**//* Opera */
}

li:hover
{...}{
width:200px;
height:200px;
transform:rotate(180deg);
-moz-transform:rotate(180deg); /**//* Firefox 4 */
-webkit-transform:rotate(180deg); /**//* Safari and Chrome */
-o-transform:rotate(180deg); /**//* Opera */
}
</style>
</head>
<body>

<li>请把鼠标指针放到黄色的 li 元素上，来查看过渡效果。</li>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

</body>
</html>

标签：CSS3

上一篇：background-position的使用

下一篇：CSS伪元素:before, :after

您可能感兴趣

CSS3 transition过渡效果

CSS3 transition过渡效果

热门推荐

排行榜