/* ============================================================
    CarMove
============================================================ */

@keyframes CarMove {

    from {
        transform: translate(100%, 0);
    }

    to {
        transform: translate(0%, 0);
    }
}

/* ============================================================
  Move
============================================================ */
@keyframes move {
    from {
        left: 100%;
    }

    to {
        left: -0.5%;
    }
}

@keyframes boat-animation {
    0% {
        transform: rotate(-3deg);
    }

    100% {
        transform: rotate(3deg);
    }
}

;

/* ============================================================
    縮小>放大
============================================================ */
@keyframes toBig {

    from {
        opacity: 0;
        transform: scale(0) rotate(-5deg);
    }

    to {
        opacity: 0;
        transform: scale(1) rotate(-5deg);
    }
}


/* ============================================================
  CardMove
============================================================ */
@keyframes CardMove {

    from {
        opacity: 0;
        transform: translate(0%, 0) scale(0);
    }

    to {
        opacity: 1;
        transform: translate(0%, 0) scale(1);
    }
}



/* ============================================================
  CarMove2
============================================================ */


@keyframes CarMove2 {
    0% {
        transform: translate(-111%, -4%) scale(0.2) rotate(38deg);
        opacity: 0;
    }

    5% {
        transform: translate(-105%, 23%) scale(0.2) rotate(15deg);
        opacity: 1;
    }

    25% {
        transform: translate(-95%, 28%) scale(0.2) rotate(5deg);
        opacity: 1;
    }

    100% {
        transform: translate(0%, 0%) scale(1) rotate(0deg);
    }



}


/* ============================================================
  CarMove3
============================================================ */
@-webkit-keyframes CarMove3 {
    from {
        -webkit-transform: translate(50%, 0);
    }

    to {
        -webkit-transform: translate(0%, 0);
    }
}

@-moz-keyframes CarMove3 {
    from {
        -moz-transform: translate(50%, 0);
    }

    to {
        -moz-transform: translate(0%, 0);
    }
}

@-ms-keyframes CarMove3 {
    from {
        -ms-transform: translate(50%, 0);
    }

    to {
        -ms-transform: translate(0%, 0);
    }
}

@-o-keyframes CarMove3 {

    from {
        -o-transform: translate(50%, 0);
    }

    to {
        -o-transform: translate(0%, 0);
    }
}

@keyframes CarMove3 {

    from {
        transform: translate(50%, 0);
    }

    to {
        transform: translate(0%, 0);
    }
}

/* ============================================================
  Up +縮小>放大
============================================================ */


@keyframes Up {
    0% {
        opacity: 0;
        transform: translate(0%, 8%) scale(0) rotate(-10deg);
        ;
    }

    100% {
        opacity: 1;
        transform: translate(0%, 0) scale(1);
        ;
    }
}

/* ============================================================
  PULSE
============================================================ */
@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(1);
    }

    25% {
        -webkit-transform: scale(1.1);
    }

    50% {
        -webkit-transform: scale(1);
    }

    100% {
        -webkit-transform: scale(1);
    }
}

@-moz-keyframes pulse {
    0% {
        -moz-transform: scale(1);
    }

    25% {
        -moz-transform: scale(1.01);
    }

    50% {
        -moz-transform: scale(1);
    }

    100% {
        -moz-transform: scale(1);
    }
}

@-ms-keyframes pulse {
    0% {
        -ms-transform: scale(1);
    }

    25% {
        -ms-transform: scale(1.01);
    }

    50% {
        -ms-transform: scale(1);
    }

    100% {
        -ms-transform: scale(1);
    }
}

@-o-keyframes pulse {
    0% {
        -o-transform: scale(1);
    }

    25% {
        -o-transform: scale(1.01);
    }

    50% {
        -o-transform: scale(1);
    }

    100% {
        -o-transform: scale(1);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.01);
    }

    100% {
        transform: scale(1);
    }
}

/* ============================================================
  Rotate
============================================================ */
@-webkit-keyframes Rotate {
    0% {
        -webkit-transform: rotate(0)
    }

    25% {
        -webkit-transform: rotate(2deg)
    }

    50% {
        -webkit-transform: rotate(0);
    }

    75% {
        -webkit-transform: rotate(-2deg)
    }

    100% {
        -webkit-transform: rotate(0);
    }
}

@-moz-keyframes Rotate {
    0% {
        -moz-transform: rotate(0)
    }

    25% {
        -moz-transform: rotate(2deg)
    }

    50% {
        -moz-transform: rotate(0);
    }

    75% {
        -moz-transform: rotate(-2deg)
    }

    100% {
        -moz-transform: rotate(0);
    }
}

@-ms-keyframes Rotate {
    0% {
        -ms-transform: rotate(0)
    }

    25% {
        -ms-transform: rotate(2deg)
    }

    50% {
        -ms-transform: rotate(0);
    }

    75% {
        -ms-transform: rotate(-2deg)
    }

    100% {
        -ms-transform: rotate(0);
    }
}

@-o-keyframes Rotate {
    0% {
        -o-transform: rotate(0)
    }

    25% {
        -o-transform: rotate(2deg)
    }

    50% {
        -o-transform: rotate(0);
    }

    75% {
        -o-transform: rotate(-2deg)
    }

    100% {
        -o-transform: rotate(0);
    }
}

@keyframes Rotate {
    0% {
        transform: rotate(0)
    }

    25% {
        transform: rotate(2deg)
    }

    50% {
        transform: rotate(0);
    }

    75% {
        transform: rotate(-2deg)
    }

    100% {
        transform: rotate(0);
    }
}

/* ============================================================
  fadeIn
============================================================ */
@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-ms-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-o-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}



@keyframes updown {
    0% {
        transform: translateY(10px);
    }

    50% {
        transform: translateY(20px);
    }

    100% {
        transform: translateY(10px);
    }
}

/* ============================================================
  shiny
============================================================ */
@-webkit-keyframes shiny {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    20% {
        opacity: 1;
    }

    30% {
        opacity: 0;
    }

    40% {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    60% {
        opacity: 1;
    }

    70% {
        opacity: 0;
    }

    80% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes shiny {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    20% {
        opacity: 1;
    }

    30% {
        opacity: 0;
    }

    40% {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    60% {
        opacity: 1;
    }

    70% {
        opacity: 0;
    }

    80% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@-ms-keyframes shiny {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    20% {
        opacity: 1;
    }

    30% {
        opacity: 0;
    }

    40% {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    60% {
        opacity: 1;
    }

    70% {
        opacity: 0;
    }

    80% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@-o-keyframes shiny {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    20% {
        opacity: 1;
    }

    30% {
        opacity: 0;
    }

    40% {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    60% {
        opacity: 1;
    }

    70% {
        opacity: 0;
    }

    80% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@keyframes shiny {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    20% {
        opacity: 1;
    }

    30% {
        opacity: 0;
    }

    40% {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    60% {
        opacity: 1;
    }

    70% {
        opacity: 0;
    }

    80% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* ============================================================
  shiny2(旋轉)
============================================================ */
@-webkit-keyframes shiny2 {
    0% {
        opacity: 1;
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(-15deg);
    }

    100% {
        opacity: 1;
        transform: rotate(-30deg);
    }
}

@-moz-keyframes shiny2 {
    0% {
        opacity: 1;
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(-15deg);
    }

    100% {
        opacity: 1;
        transform: rotate(-30deg);
    }
}

@-ms-keyframes shiny2 {
    0% {
        opacity: 1;
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(-15deg);
    }

    100% {
        opacity: 1;
        transform: rotate(-30deg);
    }
}

@-o-keyframes shiny2 {
    0% {
        opacity: 1;
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(-15deg);
    }

    100% {
        opacity: 1;
        transform: rotate(-30deg);
    }
}

@keyframes shiny2 {
    0% {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(-180deg) scale(0.5);
    }

    100% {
        opacity: 1;
        transform: rotate(-360deg) scale(1);
    }
}

@keyframes shake {
    0% {
        transform: rotate(10deg);
    }

    55% {
        transform: rotate(-10deg);
    }

    100% {
        transform: rotate(10deg);
    }

}