CSS过渡(transition)

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

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。一般情况下与hover配合使用

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

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

2、规定效果的时长

Transition的属性

transition-property：none/all

transition-duration: 5s 完成过渡效果需要花费的时间，单位秒，默认为0

transition-delay：过渡效果何时开始，单位秒，默认为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;

}

结果：将鼠标放到黄色的 div 元素上，方块会产生放大的效果。

CSS动画（animation）

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

CSS3动画遵循 @keyframes 规则

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

1、规定动画的名称

2、规定动画的时长

常用animation属性

animation-name：规定 @keyframes 动画的名称

animation-duration：规定动画完成一个周期所花费的秒或毫秒。默认是 0

animation-delay：规定动画何时开始。默认是 0

animation-timing-function：从开头到结尾以相同的速度来播放动画

animation-iteration-count：规定动画被播放的次数。默认是 1

animation-play-state：规定动画是否正在运行或暂停。默认是 "running"

语法规则：

div

{

width:100px;

height:100px;

background:red;

position:relative;

animation-name:myfirst;

animation-duration:5s;

animation-timing-function:linear;

animation-delay:2s;

animation-iteration-count:infinite;

animation-direction:alternate;

animation-play-state:running;

/* Firefox: */

-moz-animation-name:myfirst;

-moz-animation-duration:5s;

-moz-animation-timing-function:linear;

-moz-animation-delay:2s;

-moz-animation-iteration-count:infinite;

-moz-animation-direction:alternate;

-moz-animation-play-state:running;

/* Safari and Chrome: */

-webkit-animation-name:myfirst;

-webkit-animation-duration:5s;

-webkit-animation-timing-function:linear;

-webkit-animation-delay:2s;

-webkit-animation-iteration-count:infinite;

-webkit-animation-direction:alternate;

-webkit-animation-play-state:running;

/* Opera: */

-o-animation-name:myfirst;

-o-animation-duration:5s;

-o-animation-timing-function:linear;

-o-animation-delay:2s;

-o-animation-iteration-count:infinite;

-o-animation-direction:alternate;

-o-animation-play-state:running;

}

@keyframes myfirst

{

0% {background:red; left:0px; top:0px;}

25% {background:yellow; left:200px; top:0px;}

50% {background:blue; left:200px; top:200px;}

75% {background:green; left:0px; top:200px;}

100% {background:red; left:0px; top:0px;}

}

@-moz-keyframes myfirst /* Firefox */

{

0% {background:red; left:0px; top:0px;}

25% {background:yellow; left:200px; top:0px;}

50% {background:blue; left:200px; top:200px;}

75% {background:green; left:0px; top:200px;}

100% {background:red; left:0px; top:0px;}

}

@-webkit-keyframes myfirst /* Safari and Chrome */

{

0% {background:red; left:0px; top:0px;}

25% {background:yellow; left:200px; top:0px;}

50% {background:blue; left:200px; top:200px;}

75% {background:green; left:0px; top:200px;}

100% {background:red; left:0px; top:0px;}

}

@-o-keyframes myfirst /* Opera */

{

0% {background:red; left:0px; top:0px;}

25% {background:yellow; left:200px; top:0px;}

50% {background:blue; left:200px; top:200px;}

75% {background:green; left:0px; top:200px;}

100% {background:red; left:0px; top:0px;}

}