/*button1*/


/*button2*/
.main1{
	width: 490px;
	height: 25px;
	background-color: #FFC;
	overflow: hidden;
	position: relative;
	background-image:url(bar1a_o.jpg);
   
}

.mask3 {
	filter: alpha(opacity=0);
	opacity: 0;
	width: 490px;
	height: 25px;
	position: absolute;
	-webkit-transform: scale(0) rotate(-180deg);
	-mos-transform: scale(0) rotate(-180deg);
	-ms-transform: scale(0) rotate(-180deg);
	-o-transform: scale(0) rotate(-180deg);
	transform: scale(0) rotate(-180deg);
	/*加transition*才會動在原本的di*v加*/
	-webkit-transition: all 0.8s ease-in-out;
	-moz-transition: all 0.8s ease-in-out;
	-o-transition: all 0.8s ease-in-out;
	-ms-transition: all 0.8s ease-in-out;
	transition: all 0.8s ease-in-out;
	font-family: "細明體_HKSCS";
	font-weight: bold;
	background-image:url(bar2o.jpg);
}
.main1:hover .mask3 {
  
   filter: alpha(opacity=1);
   opacity: 1;
   -webkit-transform: scale(1) rotate(0deg);
   -moz-transform: scale(1) rotate(0deg);
   -o-transform: scale(1) rotate(0deg);
   -ms-transform: scale(1) rotate(0deg);
}
.main1:hover {
  
-webkit-animation-name: slider; -webkit-animation-timing-function: ease;
-webkit-animation-duration: 1s; -webkit-animation-iteration-count: infinite;
animation-name: slider; animation-timing-function: ease;
animation-duration: 1s; animation-iteration-count: 1;
}

@keyframes slider {
0% {opacity:1;}
50% {opacity:0.5;}
70% {opacity:0.3;}
100% {opacity:0;}
}