css3中的animation属性、background、overflow属性

animation属性

animation属性是一个简写属性，用于设置六个动画:

animation-name:规定需要绑定到选择器的keyframe名称
animation-duration:规定完成动画所花费的时间，以秒或毫秒计
animation-timing-function:规定动画的速度曲线
animation-delay:规定在动画开始之前的延迟
animation-iteration-count:规定动画应该播放的次数
animation-direction:规定是否应该轮流反向播放动画
div的css的样式例子:

div{
width: 100px;
height: 100px;
background: red;
position:relative;
animation-name:move;/*名字和@keyframes后面的名字要一样，比不可少*/
animation-duration:5s; /*5sb表示移动所需的全部时间 */
animation-delay:5s;/*表示播放之前的延时时间*/
animation-direction:alternate;/*表示正向和反向轮流播放 有一个默认值为normal表示不反向播放*/
/*-moz-animation:move 5s infinite; /* Firefox */
/*-webkit-animation:move 5s infinite;*/ /* Safari and Chrome */

/*-o-animation:move 5s infinite; *//* Opera */
animation-iteration-count: 3;/*播放次数*/
 animation-timing-function:cublic-bezier(0.42,1.0.58,1);/*通过函数来定义速度曲线*/
}
@keyframes move
{
from {top:0px;}
to {top:200px;}
}

background的例子：

 body{
		background-repeat: no-repeat;/*是否平铺*/
		/*background-color:red;/*声明div的背景颜色*/
	   background-position:center;/*设置背景图片的起始位置*/
	   background-attachment:fixed;
	   background-image: url(images/header.jpg);/*背景图片*/
	   background-clip: padding-box;
	   background-size: 80px 60px;/*设置背景图片的大小*/
	}

overflow的属性

visible:不剪裁内容，可能会显示在内容框之外
hidden：剪裁内容-不提供滚动机制
scroll:剪裁内容-提供滚动机制
auto：如果溢出框，则应该提供滚动机制
no-display:如果内容不合适内容框，则删除整个框
no-content:如果内容不合适内容框，则隐藏整个内容

  div{
	width: 200px;
	height: 10px;
	overflow-x: hidden;/*将div中的图片在水平方向超出的}
部分隐藏*/
overflow-y:hidden;/*将div中的图片垂直方向超出的部分隐藏*/
 overflow:auto;
overflow-style:marquee,panner;/*将超出的部分通过滚动的方式显示出来*/