CSS3

CSS过渡(transition)
经过 CSS3，咱们能够在不使用 Flash 动画或 JavaScript 的状况下，当元素从一种样式变换为另外一种样式时为元素添加效果。
CSS3 过渡是元素从一种样式逐渐改变为另外一种的效果。通常状况下与hover配合使用
要实现这一点，必须规定两项内容：
一、规定您但愿把效果添加到哪一个 CSS 属性上
二、规定效果的时长
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 动画属性，便可将动画绑定到选择器：
一、规定动画的名称
二、规定动画的时长
经常使用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;}
}