.SONCOL
{
    background-color:#0080cc;
animation: COLORONANT .5s linear 0s 1 normal;
-moz-animation: COLORONANT .5s linear 0s 1 normal;	/* Firefox */
-webkit-animation: COLORONANT .5s linear 0s 1 normal;	/* Safari 和 Chrome */
-o-animation: COLORONANT .5s linear 0s 1 normal;	/* Opera */    
}
.SWITCHON
{
    left:25px;
    
animation: ONANT .5s linear 0s 1 normal;
-moz-animation: ONANT .5s linear 0s 1 normal;	/* Firefox */
-webkit-animation: ONANT .5s linear 0s 1 normal;	/* Safari 和 Chrome */
-o-animation: ONANT .5s linear 0s 1 normal;	/* Opera */
}
.SOFFCOL
{
    background-color:#cccccc;
animation: COLOROFFANT .5s linear 0s 1 normal;
-moz-animation: COLOROFFANT .5s linear 0s 1 normal;	/* Firefox */
-webkit-animation: COLOROFFANT .5s linear 0s 1 normal;	/* Safari 和 Chrome */
-o-animation: COLOROFFANT .5s linear 0s 1 normal;	/* Opera */    
}
.SWITCHOFF
{
    left:1px;
animation: OFFANT .5s linear 0s 1 normal;
-moz-animation: OFFANT .5s linear 0s 1 normal;	/* Firefox */
-webkit-animation: OFFANT .5s linear 0s 1 normal;	/* Safari 和 Chrome */
-o-animation: OFFANT .5s linear 0s 1 normal;	/* Opera */
}


@keyframes ONANT
{
0%   {left:1px;}
100% {left: 25px;}
}

@-moz-keyframes ONANT /* Firefox */
{
0%   {left:1px;}
100% {left: 25px;}
}

@-webkit-keyframes ONANT /* Safari 和 Chrome */
{
0%   {left:1px;}
100% {left: 25px;}
}

@-o-keyframes ONANT /* Opera */
{
0%   {left:1px;}
100% {left: 25px;}
}


@keyframes OFFANT
{
0%   {left:25px;}
100% {left: 1px;}
}

@-moz-keyframes OFFANT /* Firefox */
{
0%   {left:25px;}
100% {left: 1px;}
}

@-webkit-keyframes OFFANT /* Safari 和 Chrome */
{
0%   {left:25px;}
100% {left: 1px;}
}

@-o-keyframes OFFANT /* Opera */
{
0%   {left:25px;}
100% {left: 1px;}
}



@keyframes COLORONANT
{
0%   {background-color:#cccccc;}
100% {background-color:#0080cc;}
}

@-moz-keyframes COLORONANT /* Firefox */
{
0%   {background-color:#cccccc;}
100% {background-color:#0080cc;}
}

@-webkit-keyframes COLORONANT /* Safari 和 Chrome */
{
0%   {background-color:#cccccc;}
100% {background-color:#0080cc;}
}

@-o-keyframes COLORONANT /* Opera */
{
0%   {background-color:#cccccc;}
100% {background-color:#0080cc;}
}


@keyframes COLOROFFANT
{
0%   {background-color:#0080cc;}
100% {background-color:#cccccc;}
}

@-moz-keyframes COLOROFFANT /* Firefox */
{
0%   {background-color:#0080cc;}
100% {background-color:#cccccc;}
}

@-webkit-keyframes COLOROFFANT /* Safari 和 Chrome */
{
0%   {background-color:#0080cc;}
100% {background-color:#cccccc;}
}

@-o-keyframes COLOROFFANT /* Opera */
{
0%   {background-color:#0080cc;}
100% {background-color:#cccccc;}
}