通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果

transition

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

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

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

    div:hover
    {
    width:300px;
    }

简写：

    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 2s;

等于

    transition: width 1s linear 2s;

下面的表格列出了所有的转换属性：

transition-timing-function属性介绍

五、CSS3动画

通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

CSS3 @keyframes 规则

如需在 CSS3 中创建动画，您需要学习 @keyframes规则。

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

CSS3 动画

当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。

通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：

• 规定动画的名称

• 规定动画的时长

实例

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}

@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}

把 "myfirst" 动画捆绑到 div 元素，时长：5 秒：
div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s;  /* Safari 和 Chrome */
-o-animation: myfirst 5s;   /* Opera */
}

什么是 CSS3 中的动画？

动画是使元素从一种样式逐渐变化为另一种样式的效果。

您可以改变任意多的样式任意多的次数。

请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

下面的表格列出了 @keyframes 规则和所有动画属性：

语法：

animation: name duration timing-function delay iteration-count direction;

animation-name: keyframename|none;

animation-duration: time;

animation-timing-function: value;:

animation-delay: time;

animation-iteration-count: n|infinite;

n 定义动画播放次数的数值。

infinite 规定动画应该无限次播放。

animation-direction: normal|alternate;

normal 默认值。动画应该正常播放。 测试

alternate 动画应该轮流反向播放。

animation-play-state: paused|running;

paused 规定动画已暂停。

running 规定动画正在播放。

animation-fill-mode : none | forwards | backwards | both;

none 不改变默认行为。

forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。

backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。

both 向前和向后填充模式都被应用。