CSS3

IT/互联网 / 编程语言 养生小编 来源:互联网 150浏览 0评论

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;
-webkit-transition:width 2s;
-o-transition:width 2s;
}

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;

-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;

-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;

-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
{
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
{
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
{
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;}
}

 

CSS3

原文:http://www.cnblogs.com/liam-lee0787/p/5936753.html