/* ============================================================
  Move
============================================================ */
@keyframes move {
    0% {
        opacity: 0;
        transform: scale(1) translate(-80%, -37%);

    }

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

    }
}

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

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

;



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

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

@keyframes CarMove {
    from {
        opacity: 0;
        transform: translate(50%, 0) scale(0);
    }

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

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

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

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

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

@keyframes ToBig {
    0% {
        opacity: 0;
        transform: scale(0);

    }

    100% {
        opacity: 1;
        transform: 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(旋轉)
============================================================ */
@keyframes shiny2 {
    0% {
        transform: rotate(0deg);
    }

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

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

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

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

}