如何使用CSS3 Transition属性

David Pickett. 经过 David Pickett.  |  2012年12月06日

随着CSS3的引入,可以使用许多新功能,可用于创造巨大效果;最有用的是 过渡 property.

转换属性是CSS中的一个重要新开发。它可用于使用简单结构对div或类创建动态变化效果:

过渡: property duration timing-function delay;

CSS.3.’如果没有像jQuery这样的JavaScript库的大开销为网站添加小型动画是一种很好的方法。

 

演示

在我们开始之前,您可以在此处看到一个演示 行动中的过渡财产.

 

财产

首先,为了使转换属性工作,需要定义它的标准属性。可以说是将定义的两个最常见的属性是 宽度高度。 写下房产独立只是使用:

过渡-property: <em>define property</em>

 

尺寸变化

以下情况下,一旦定义了属性,则需要分配开始和结束值。在诸如宽度或高度之类的值的情况下,需要使用起始值设置属性,然后使用其他条件进行结束值。

例如,这里我们将转换属性设置为宽度,然后将宽度的起始值设置为“宽度”,然后在ober悬停结束时设置结束值:

#mainheader {
    transition-property:width;
    width:50px; 
}
#mainheader:hover {
    width:75px;
}

 

期间

既然我们已经定义了要转换的属性,开始和结束值,我们需要定义转换的持续时间。这是通过在以下几秒钟或毫秒内定义长度来实现的:

过渡-duration<em>: duration;</em>

将其构建到示例中创建以下代码:

#mainheader {
    transition-property:width;
    transition-duration:0.5s; 
    width:500px;
}
#mainheader:hover {
    width:750px;
}

这意味着主球员DID将在5秒钟内持续25px。

 

定时功能

代码足以创建一个很好的效果,但是我们可以通过使用进一步利用CSS3转换属性 timing-function 使用此属性可以更改转换持续时间的速度曲线。默认情况下,转换属性设置为线性曲线。但是,您可以定义轻松,轻松,易于出电,易用的甚至立方体贝尔以改变速度曲线。 Cubic-bezier允许您使用(n,n,n,n)来定义自己的值,其中n可以在0和1之间(例如线性是(0,0,1,1))。

将此代码添加到我们的示例结果:

#mainheader {
    transition-property:width;
    transition-timing-function:ease-in-out; 
    transition-duration:0.5s; 
    width:500px;
}
#mainheader:hover {
    width:750px;
}

 

延迟

此外,与过渡持续时间一样,使用转换延迟属性定义转换效果开始之前暂停:

过渡-delay: <em>time;</em>

 

结论

最后,在使用CSS3转换属性时考虑两件事是很重要的。首先,目前在流通中的大多数浏览器都需要浏览器前缀来使用它(IE10的异常,Opera和Firefox16 +):

-moz-transition:firefox 15
-webkit-转换:用于Chrome和Safari

(请记住,IE9和更低的不支持转型财产。)

其次,虽然我’在上面的例子中使用了长手,以清楚起见’S认为简称的最佳做法,如下:

#mainheader {
    -moz-transition: width ease-in-out 0.5s 0.1s; /* for Firefox 15 */
    -webkit-transition: width ease-in-out 0.5s 0.1s; /* for Chrome and Safari */
    transition: width ease-in-out 0.5s 0.1s;
    width:500px;
}
#mainheader:hover {
    width:750px;
}

 

使用css3’S转型财产?它如何与jQuery的Tweens进行比较?让我们在评论中知道。

特色图片/缩略图, 运动镜像 via Shutterstock.