.fixed {
  width: 300px; 
  height: 64px;
  right:10;
  top: 80px;
  border-radius:5px;
  background:#FF9933;
  position: fixed;
  z-index: 1;
  overflow:hidden;
  border: 8px solid #FF9933;
  background-image:url(/images/load_orange.gif);
  background-repeat:no-repeat;
  background-position:right;
}
.anime_in{
    animation: anime_in 0.5s;
    -webkit-animation: anime_in 0.5s;
}

.anime_out{
    animation: anime_out 0.5s;
    -webkit-animation: anime_out 0.5s;
    transform: scale(0, 0);
    -webkit-transform: scale(0, 0);
}

@keyframes anime_in {
    0% { transform: scale(0, 0); }
    50% { transform: scale(1.3, 1.3); }
    100%{ transform: scale(1, 1); }
}
@-webkit-keyframes anime_in {
    0% { -webkit-transform: scale(0, 0); }
    50% { -webkit-transform: scale(1.3, 1.3); }
    100%{ -webkit-transform: scale(1, 1); }
}

@keyframes anime_out {
    0% { transform: scale(1, 1); }
    50% { transform: scale(1.3, 1.3); }
    100%{ transform: scale(0, 0); }
}
@-webkit-keyframes anime_out {
    0% { -webkit-transform: scale(1, 1); }
    50% { -webkit-transform: scale(1.3, 1.3); }
    100%{ -webkit-transform: scale(0, 0); }
}
.turn{
  animation: turn_x 1s ease infinite;
}
@keyframes turn_x{
    0% {transform:rotateX(0deg);}
  100% {transform:rotateX(360deg);}
}
.turnY{
  animation: turn_y 1s ease infinite;
}
@keyframes turn_y{
    0% {transform:rotateY(0deg);}
  100% {transform:rotateY(360deg);}
}
#message_1{
  font-size: 12px;
  color: #f2ff8f;
}
#message_2{
  font-size: 8px;
  color: #333333;
}
.out {
  /*visibility : hidden;*/
}
 
/* 点滅 */
.blinking{
  -webkit-animation:blink 1s ease-in-out infinite alternate;
  -moz-animation:blink 1s ease-in-out infinite alternate;
  animation:blink 1s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
.complete{
  transform: scale(1.5,1.5);
}

.shake{
  transition: all 1s ease;
  transform: rotateX(360deg);
}
.completed_6{
  animation: poyooon 0.9s linear 0s 1;
  /*transition: all 1s ease;*/
  /*transform: rotateX(360deg);*/
}
.completed_5{
  transition: all 1s ease;
  transform: rotateY(360deg);
}
.completed_4{
  transition: all 1s ease;
  transform: rotateX(360deg);
}

.completed_3{
  animation: shake 0.2s linear infinite;
  -webkit-animation: shake 0.2s linear infinite;
}
.completed_2{
  transition: all 1s ease;
  transform: rotateX(360deg);
}
.completed_1{
  animation: poyooon 0.9s linear 0s 1;
}
@keyframes shake {
    0% { transform: translate(3px, 2px) rotate(0deg); }
    10% { transform: translate(-2px, -3px) rotate(-1deg); }
    20% { transform: translate(-4px, 0px) rotate(1deg); }
    30% { transform: translate(0px, 3px) rotate(0deg); }
    40% { transform: translate(2px, -2px) rotate(1deg); }
    50% { transform: translate(-2px, 3px) rotate(-1deg); }
    60% { transform: translate(-4px, 2px) rotate(0deg); }
    70% { transform: translate(3px, 2px) rotate(-1deg); }
    80% { transform: translate(-2px, -2px) rotate(1deg); }
    90% { transform: translate(2px, 4px) rotate(0deg); }
    100% { transform: translate(2px, -3px) rotate(-1deg); }
}
@keyframes poyooon {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  10%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  40%  { transform: scale(1.2, 0.8) translate(0%, 15%); }
  50%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
  60%  { transform: scale(0.9, 1.2) translate(0%, -100%); }
  75%  { transform: scale(0.9, 1.2) translate(0%, -20%); }
  85%  { transform: scale(1.2, 0.8) translate(0%, 15%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}