@keyframes floatsY {
    0% {
        transform: translateY(-15px);
    }
    50%{
        transform: translateY(-0px);
    }
    100% {
        transform: translateY(-15px);
    }
}

@keyframes floatsY2 {
    0% {
        transform: translateY(-30px);
    }
    50%{
        transform: translateY(0px);
    }
    100% {
        transform: translateY(-30px);
    }
}

@keyframes floatsY3 {
    0% {
        transform: translateY(-40px);
    }
    50%{
        transform: translateY(-0px);
    }
    100% {
        transform: translateY(-40px);
    }
}


.floatsY{
    animation-name: floatsY;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.floatsY2{
    animation-name: floatsY2;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.floatsY3{
    animation-name: floatsY3;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@media screen and (max-width: 768px){
    
    .floatsY2{
        animation-name: floatsY;
    }
    
    .floatsY3{
        animation-name: floatsY;
    }
}


@keyframes fadeInFromLeft {
    from {
      transform: translateX(0);
    }
    to {
        transform: translateX(100%);
        display: none;
    }
}
  
.fadeInFromLeft {
    animation: fadeInFromLeft 2s ease-out forwards;
}

@keyframes fadeInFromRight {
    from {
      transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
        display: none;
    }
}
  
.fadeInFromRight {
    animation: fadeInFromRight 2s ease-out forwards;
}

@keyframes fadeInFromTop {
    from {
      transform: translateY(0);
    }
    to {
        transform: translateY(100%);
        display: none;
    }
}
  
.fadeInFromTop {
    animation: fadeInFromTop 2s ease-out forwards;
}

@keyframes fadeInFromDown {
    from {
      transform: translateY();
    }
    to {
        transform: translateY(-100%);
        display: none;
    }
}
  
.fadeInFromDown {
    animation: fadeInFromDown 2s ease-out forwards;
}

@keyframes floatY {
    0% {
        transform: translateY(-30px);
    }
    50%{
        transform: translateY(-15px);
    }
    100% {
        transform: translateY(-30px);
    }
}

@keyframes floatY2 {
    0% {
        transform: translateY(-60px);
    }
    50%{
        transform: translateY(-30px);
    }
    100% {
        transform: translateY(-60px);
    }
}

@keyframes floatY3 {
    0% {
        transform: translateY(-40px);
    }
    50%{
        transform: translateY(-25px);
    }
    100% {
        transform: translateY(-40px);
    }
}

.floatY{
    animation-name: floatY;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.floatY2{
    animation-name: floatY2;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.floatY3{
    animation-name: floatY3;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@media screen and (max-width: 768px){

    .floatY2{
        animation-name: floatY;
    }
    
    .floatY3{
        animation-name: floatY;
    }
}


@keyframes tst {
    0% {
        transform: scale(0);
    }
    50%{
        left: -30%;
        transform: scale(1.1);
    }
    100% {
        left: 0;
        transform: scale(1);
    }
}

.tst {
    animation: tst 3s ease forwards;
}

@keyframes ftl {
    0% {
        opacity: 0;
    }
    25%{
        opacity: 1;
    }
    50%{
        transform: translateX(-30px);
    }
    100% {
        transform: translateX(0px);
    }
}

@keyframes ftr {
    0% {
        opacity: 0;
    }
    25%{
        opacity: 1;
    }
    50%{
        transform: translateX(30px);
    }
    100% {
        transform: translateX(0px);
    }
}

@keyframes ftt {
    0% {
        opacity: 0;
    }
    25%{
        opacity: 1;
    }
    50%{
        transform: translateY(-30px);
    }
    100% {
        transform: translateY(0px);
    }
}

.ftl {
    animation: ftl 2s ease forwards;
}

.ftr {
    animation: ftr 2s ease forwards;
}

.ftt {
    animation: ftt 2s ease forwards;
}

@keyframes scales {
    0% {
        transform: scale(0.8);
    }
    50% {
        transform: scale(1);
    }
    100% {
        transform: scale(0.8);
    }
}

.scales{
    animation-name: scales;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}


@keyframes ripple-white {
    0% {
        box-shadow: 0 0 0 0 rgb(221, 218, 219),0 0 0 10px rgb(221, 218, 219),0 0 0 20px rgb(221, 218, 219);
    }
    100% {
        box-shadow: 0 0 0 10px rgb(221, 218, 219),0 0 0 20px rgb(221, 218, 219),0 0 0 30px rgba(221, 218, 219,0);
    }
}

@keyframes ripple-gury{
    0%{
        transform: scale(1);
        opacity: 1;
    }
    50%{
        transform: scale(1.05);
    }
    100%{
        transform: scale(1.1);
        opacity: 0;
    }
}

@keyframes ripple-gury3{
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(1);
    }
    75%{
        transform: scale(1.05);
        opacity: 1;
    }
    100%{
        transform: scale(1.1);
        opacity: 0;
    }
}


@keyframes ripple-gury2{
    0%{
        transform: scale(1);
        opacity: 1;
    }
    50%{
        transform: scale(1.1);
    }
    100%{
        transform: scale(1.15);
        opacity: 0;
    }
}

@keyframes ripple-gury4{
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(1);
    }
    90%{
        transform: scale(1.1);
        opacity: 1;
    }
    100%{
        transform: scale(1.15);
        opacity: 0;
    }
}

/* 水波纹 */
.ripple-white{
    transition: .5s;
    animation: ripple-white 1s linear infinite;
}



@keyframes bounces {
    60%,80%,to {
        -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
        animation-timing-function: cubic-bezier(.215,.61,.355,1);
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    70% {
        -webkit-animation-timing-function: cubic-bezier(.755,.05,.855,.06);
        animation-timing-function: cubic-bezier(.755,.05,.855,.06);
        -webkit-transform: translate3d(0,-30px,0) scaleY(1.1);
        transform: translate3d(0,-30px,0) scaleY(1.1)
    }

    85% {
        -webkit-animation-timing-function: cubic-bezier(.755,.05,.855,.06);
        animation-timing-function: cubic-bezier(.755,.05,.855,.06);
        -webkit-transform: translate3d(0,-15px,0) scaleY(1.05);
        transform: translate3d(0,-15px,0) scaleY(1.05)
    }

    90% {
        -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);
        transition-timing-function: cubic-bezier(.215,.61,.355,1);
        -webkit-transform: translateZ(0) scaleY(.95);
        transform: translateZ(0) scaleY(.95)
    }

    95% {
        -webkit-transform: translate3d(0,-4px,0) scaleY(1.02);
        transform: translate3d(0,-4px,0) scaleY(1.02)
    }
}

.bounces {
    -webkit-animation-name: bounces;
    animation-name: bounces;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom
}