.f-nav {

}
.f-nav li {

}
.sideline {

}
.f-nav li.active {

	color: #fff;
}
.f-nav li.fontNav {

	color: #fff;
	animation: fontNav .1s;
}
.f-nav li.downNav {

	color: #fff;
	animation: downNav .5s;
}
.f-nav li.leftNav {

	color: #fff;
	animation: leftNav .1s;
}
.f-nav li.rightNav {

	color: #fff;
	animation: rightNav .1s;
}
/*左边缘*/
.f-nav li.edgeLeft {

	color: #fff;
	animation: edgeLeft .1s;
}
/*右边缘*/
.f-nav li.edgeRight {

	color: #fff;
	animation: edgeRight .1s;
}
/*从中间变大*/
.f-nav li.scaleChange {
	
	color: #fff;
	animation: scaleChange .1s;
}
 @keyframes scaleChange {
 0% {
 transform: scale(0);
},  50% {
 transform: scale(.5);
},  100% {
 transform: scale(1);
}
}
 @keyframes fontNav {
 0% {
 transform: translate(0, -100%);
},  50% {
 transform: translate(0, -50%);
},  100% {
 transform: translate(0, 0);
}
}
 @keyframes downNav {
 0% {
 transform: translate(0, 100%);
},  50% {
 transform: translate(0, 50%);
},  100% {
 transform: translate(0, 0);
}
}
 @keyframes leftNav {
 0% {
 transform: translate(-100%, 0%);
},  50% {
 transform: translate(-50%, 0%);
},  100% {
 transform: translate(0, 0);
}
}
 @keyframes rightNav {
 0% {
 transform: translate(100%, 0%);
},  50% {
 transform: translate(50%, 0%);
},  100% {
 transform: translate(0%, 0);
}
}
 @keyframes edgeLeft {
 0% {
 transform: translate(-100%, -100%);
}
 100% {
 transform: translate(0%, 0%);
}
}
 @keyframes edgeRight {
 0% {
 transform: translate(100%, 100%);
}
 100% {
 transform: translate(0%, 0%);
}
}