@charset "utf-8";
/* CSS Document */

.className{
    -webkit-animation: twinkling 2s infinite ease-in-out;
	-ms-animation: twinkling 2s infinite ease-in-out
}
.animated{
    -webkit-animation-duration: 1s;
	-ms-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
    animation-fill-mode: both
}
@-webkit-keyframes twinkling{
    0%{
        opacity: 0.5;
    }
    100%{
        opacity: 1;
    }
}
@-ms-keyframes twinkling{
    0%{
        opacity: 0.5;
    }
    100%{
        opacity: 1;
    }
}
@keyframes twinkling{
    0%{
        opacity: 0.5;
    }
    100%{
        opacity: 1;
    }
}
.element-animation{
  animation: animationFrames linear 4s;
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
  -webkit-animation: animationFrames linear 4s;
  -webkit-animation-iteration-count: infinite;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: animationFrames linear 4s;
  -moz-animation-iteration-count: infinite;
  -moz-transform-origin: 50% 50%;
  -o-animation: animationFrames linear 4s;
  -o-animation-iteration-count: infinite;
  -o-transform-origin: 50% 50%;
  -ms-animation: animationFrames linear 4s;
  -ms-animation-iteration-count: infinite;
  -ms-transform-origin: 50% 50%;
}

@keyframes animationFrames{
  0% {
    transform:  translate(29px,-26px)  ;
  }
  38% {
    transform:  translate(53px,-57px)  ;
  }
  75% {
    transform:  translate(45px,-20px)  ;
  }
  100% {
    transform:  translate(29px,-26px)  ;
  }
}

@-moz-keyframes animationFrames{
  0% {
    -moz-transform:  translate(29px,-26px)  ;
  }
  38% {
    -moz-transform:  translate(53px,-57px)  ;
  }
  75% {
    -moz-transform:  translate(45px,-20px)  ;
  }
  100% {
    -moz-transform:  translate(29px,-26px)  ;
  }
}

@-webkit-keyframes animationFrames {
  0% {
    -webkit-transform:  translate(29px,-26px)  ;
  }
  38% {
    -webkit-transform:  translate(53px,-57px)  ;
  }
  75% {
    -webkit-transform:  translate(45px,-20px)  ;
  }
  100% {
    -webkit-transform:  translate(29px,-26px)  ;
  }
}

@-o-keyframes animationFrames {
  0% {
    -o-transform:  translate(29px,-26px)  ;
  }
  38% {
    -o-transform:  translate(53px,-57px)  ;
  }
  75% {
    -o-transform:  translate(45px,-20px)  ;
  }
  100% {
    -o-transform:  translate(29px,-26px)  ;
  }
}

@-ms-keyframes animationFrames {
  0% {
    -ms-transform:  translate(29px,-26px)  ;
  }
  38% {
    -ms-transform:  translate(53px,-57px)  ;
  }
  75% {
    -ms-transform:  translate(45px,-20px)  ;
  }
  100% {
    -ms-transform:  translate(29px,-26px)  ;
  }
}
/*動畫2*/
.element-animation2{
  animation: animationFrames2 linear 2s;
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
  -webkit-animation: animationFrames2 linear 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: animationFrames2 linear 2s;
  -moz-animation-iteration-count: infinite;
  -moz-transform-origin: 50% 50%;
  -o-animation: animationFrames2 linear 2s;
  -o-animation-iteration-count: infinite;
  -o-transform-origin: 50% 50%;
  -ms-animation: animationFrames2 linear 2s;
  -ms-animation-iteration-count: infinite;
  -ms-transform-origin: 50% 50%;
}

@keyframes animationFrames2{
  0% {
    opacity:1;
  }
  50% {
    opacity:0.36;
  }
  100% {
    opacity:1;
  }
}

@-moz-keyframes animationFrames2{
  0% {
    opacity:1;
  }
  50% {
    opacity:0.36;
  }
  100% {
    opacity:1;
  }
}

@-webkit-keyframes animationFrames2 {
  0% {
    opacity:1;
  }
  50% {
    opacity:0.36;
  }
  100% {
    opacity:1;
  }
}

@-o-keyframes animationFrames2 {
  0% {
    opacity:1;
  }
  50% {
    opacity:0.36;
  }
  100% {
    opacity:1;
  }
}

@-ms-keyframes animationFrames2 {
  0% {
    opacity:1;
  }
  50% {
    opacity:0.36;
  }
  100% {
    opacity:1;
  }
}

/*動畫3*/

.element-animation3:hover{
  animation: animationFrames3 linear 0.8s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: animationFrames3 linear 0.8s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: animationFrames3 linear 0.8s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: animationFrames3 linear 0.8s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: animationFrames3 linear 0.8s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes animationFrames3{
  0% {
    transform:  translate(0px,0px)  ;
  }
  30% {
    transform:  translate(-21px,-32px)  ;
  }
  65% {
    transform:  translate(9px,-34px)  ;
  }
  100% {
    transform:  translate(-1px,0px)  ;
  }
}

@-moz-keyframes animationFrames3{
  0% {
    -moz-transform:  translate(0px,0px)  ;
  }
  30% {
    -moz-transform:  translate(-21px,-32px)  ;
  }
  65% {
    -moz-transform:  translate(9px,-34px)  ;
  }
  100% {
    -moz-transform:  translate(-1px,0px)  ;
  }
}

@-webkit-keyframes animationFrames3 {
  0% {
    -webkit-transform:  translate(0px,0px)  ;
  }
  30% {
    -webkit-transform:  translate(-21px,-32px)  ;
  }
  65% {
    -webkit-transform:  translate(9px,-34px)  ;
  }
  100% {
    -webkit-transform:  translate(-1px,0px)  ;
  }
}

@-o-keyframes animationFrames3 {
  0% {
    -o-transform:  translate(0px,0px)  ;
  }
  30% {
    -o-transform:  translate(-21px,-32px)  ;
  }
  65% {
    -o-transform:  translate(9px,-34px)  ;
  }
  100% {
    -o-transform:  translate(-1px,0px)  ;
  }
}

@-ms-keyframes animationFrames3 {
  0% {
    -ms-transform:  translate(0px,0px)  ;
  }
  30% {
    -ms-transform:  translate(-21px,-32px)  ;
  }
  65% {
    -ms-transform:  translate(9px,-34px)  ;
  }
  100% {
    -ms-transform:  translate(-1px,0px)  ;
  }
}

/*動畫4*/
.element-animation4:hover {
  animation: animationFrames4 linear 4s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: animationFrames4 linear 4s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: animationFrames4 linear 4s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: animationFrames4 linear 4s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: animationFrames4 linear 4s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes animationFrames4{
  0% {
    opacity:1;
  }
  16% {
    opacity:0.32;
  }
  38% {
    opacity:0.83;
  }
  74% {
    opacity:0.45;
  }
  100% {
    opacity:1;
  }
}

@-moz-keyframes animationFrames4{
  0% {
    opacity:1;
  }
  16% {
    opacity:0.32;
  }
  38% {
    opacity:0.83;
  }
  74% {
    opacity:0.45;
  }
  100% {
    opacity:1;
  }
}

@-webkit-keyframes animationFrames4 {
  0% {
    opacity:1;
  }
  16% {
    opacity:0.32;
  }
  38% {
    opacity:0.83;
  }
  74% {
    opacity:0.45;
  }
  100% {
    opacity:1;
  }
}

@-o-keyframes animationFrames4 {
  0% {
    opacity:1;
  }
  16% {
    opacity:0.32;
  }
  38% {
    opacity:0.83;
  }
  74% {
    opacity:0.45;
  }
  100% {
    opacity:1;
  }
}

@-ms-keyframes animationFrames4 {
  0% {
    opacity:1;
  }
  16% {
    opacity:0.32;
  }
  38% {
    opacity:0.83;
  }
  74% {
    opacity:0.45;
  }
  100% {
    opacity:1;
  }
}

/*動畫5*/
.element-animation5:hover{
  animation: animationFrames5 linear 0.8s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: animationFrames5 linear 0.8s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: animationFrames5 linear 0.8s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: animationFrames5 linear 0.8s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: animationFrames5 linear 0.8s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes animationFrames5{
  0% {
    opacity:0;
    transform:  translate(2px,-28px)  scaleX(1.01) ;
  }
  26% {
    opacity:1;
    transform:  translate(2px,1px)  ;
  }
  41% {
    opacity:0.41;
    transform:  translate(2px,1px)  ;
  }
  60% {
    opacity:0.9;
    transform:  translate(2px,1px)  ;
  }
  80% {
    opacity:0.32;
    transform:  translate(2px,1px)  ;
  }
  100% {
    opacity:1;
    transform:  translate(2px,1px)  scaleX(1.01) ;
  }
}

@-moz-keyframes animationFrames5{
  0% {
    opacity:0;
    -moz-transform:  translate(2px,-28px)  scaleX(1.01) ;
  }
  26% {
    opacity:1;
    -moz-transform:  translate(2px,1px)  ;
  }
  41% {
    opacity:0.41;
    -moz-transform:  translate(2px,1px)  ;
  }
  60% {
    opacity:0.9;
    -moz-transform:  translate(2px,1px)  ;
  }
  80% {
    opacity:0.32;
    -moz-transform:  translate(2px,1px)  ;
  }
  100% {
    opacity:1;
    -moz-transform:  translate(2px,1px)  scaleX(1.01) ;
  }
}

@-webkit-keyframes animationFrames5 {
  0% {
    opacity:0;
    -webkit-transform:  translate(2px,-28px)  scaleX(1.01) ;
  }
  26% {
    opacity:1;
    -webkit-transform:  translate(2px,1px)  ;
  }
  41% {
    opacity:0.41;
    -webkit-transform:  translate(2px,1px)  ;
  }
  60% {
    opacity:0.9;
    -webkit-transform:  translate(2px,1px)  ;
  }
  80% {
    opacity:0.32;
    -webkit-transform:  translate(2px,1px)  ;
  }
  100% {
    opacity:1;
    -webkit-transform:  translate(2px,1px)  scaleX(1.01) ;
  }
}

@-o-keyframes animationFrames5 {
  0% {
    opacity:0;
    -o-transform:  translate(2px,-28px)  scaleX(1.01) ;
  }
  26% {
    opacity:1;
    -o-transform:  translate(2px,1px)  ;
  }
  41% {
    opacity:0.41;
    -o-transform:  translate(2px,1px)  ;
  }
  60% {
    opacity:0.9;
    -o-transform:  translate(2px,1px)  ;
  }
  80% {
    opacity:0.32;
    -o-transform:  translate(2px,1px)  ;
  }
  100% {
    opacity:1;
    -o-transform:  translate(2px,1px)  scaleX(1.01) ;
  }
}

@-ms-keyframes animationFrames5 {
  0% {
    opacity:0;
    -ms-transform:  translate(2px,-28px)  scaleX(1.01) ;
  }
  26% {
    opacity:1;
    -ms-transform:  translate(2px,1px)  ;
  }
  41% {
    opacity:0.41;
    -ms-transform:  translate(2px,1px)  ;
  }
  60% {
    opacity:0.9;
    -ms-transform:  translate(2px,1px)  ;
  }
  80% {
    opacity:0.32;
    -ms-transform:  translate(2px,1px)  ;
  }
  100% {
    opacity:1;
    -ms-transform:  translate(2px,1px)  scaleX(1.01) ;
  }
}