标签：
以前还没有注意过css的一些属性，近期发现有一些样式很好用，现在整理一遍。
@keyframes : 规定动画
可以通过keyframes 改变一个块的样式当然这是要配合animation属性来结合的
@keyframes mymove（mymove必须定义动画的名称在）
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
@-moz-keyframes mymove /* Firefox */
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
@-webkit-keyframes mymove /* Safari 和 Chrome */
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
@-o-keyframes mymove /* Opera */
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
animation： 将动画与元素绑定
animation 属性是一个简写属性，用于设置六个动画属性：
}
规定动画的速度曲线
linear：动画从头到尾的速度是相同的
ease：默认。动画以低速开始，然后加快，在结束前变慢。
ease-in：动画以低速开始
ease-out：动画以低速结束
ease-in-out：动画以低速开始和结束
}
规定在动画开始之前的延迟
time：可选。定义动画开始前等待的时间，以秒或毫秒计。默认值是 0
}
规定动画应该播放的次数
n：定义动画播放次数的数值
infinite：规定动画应该无限次播放
}
规定是否应该轮流反向播放动画
normal：默认值。动画应该正常播放 ，
alternate：动画应该轮流反向播放
}
规定动画是否正在运行或暂停animation-play-state: paused|running;
paused：规定动画已暂停
running：规定动画正在播放
}
属性规定动画在播放之前或之后，其动画效果是否可见animation-fill-mode : none | forwards | backwards | both;
none：不改变默认行为
forwards：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）
both：向前和向后填充模式都被应用
}
div
{
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}
background在一个声明中设置所有的背景属性
background: #00FF00 url(bgimage.gif) red no-repeat fixed top;
设置元素高度
auto：默认。浏览器会计算出实际的高度
length：使用 px、cm 等单位定义高度
%：基于包含它的块级对象的百分比高度
inherit：规定应该从父元素继承 height 属性的值
}
规定如何对齐框的子元素box-align: start|end|center|baseline|stretch;
start：对于正常方向的框，每个子元素的上边缘沿着框的顶边放置，对于反方向的框，每个子元素的下边缘沿着框的底边放置
end：对于正常方向的框，每个子元素的下边缘沿着框的底边放置，对于反方向的框，每个子元素的上边缘沿着框的顶边放置
center：均等地分割多余的空间，一半位于子元素之上，另一半位于子元素之下
baseline：如果 box-orient 是inline-axis或horizontal，所有子元素均与其基线对齐
stretch：拉伸子元素以填充包含块
}
标签：
原文地址：http://www.cnblogs.com/herozhi/p/5241225.html
