client-app/hybrid/html/animation/style.css

.hc-app-animation-body {
    position: relative;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.animation-mode {
    opacity: 1;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: backwards;
    backface-visibility: visible;
}

.item {
    width: 10%;
    height: 40px;
    display: inline-block;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 1px solid;
}

@keyframes animation-1 {
    0% {
        transform: translatez(100px) perspective(600rpx) rotate3d(1, 0, 0, 90deg);
        animation-timing-function: ease-in;
        opacity: 0;
    }
    40% {
        transform: translatez(100px) perspective(600rpx) rotate3d(1, 0, 0, -20deg);
        animation-timing-function: ease-in;
    }
    60% {
        transform: translatez(100px) perspective(600rpx) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }
    80% {
        transform: translatez(100px) perspective(600rpx) rotate3d(1, 0, 0, -5deg);
    }
    100% {
        transform: translatez(100px) perspective(600rpx);
    }
}

@keyframes animation-2 {
    0%, 60%, 75%, 90%, 100% {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        transform: translate3d(-3000px, 0px, 0px);
    }
    60% {
        opacity: 1;
        transform: translate3d(25px, 0px, 0px);
    }
    75% {
        transform: translate3d(-10px, 0px, 0px);
    }
    90% {
        transform: translate3d(5px, 0px, 0px);
    }
    100% {
        transform: none;
    }
}

@keyframes animation-3 {
    0%, 60%, 75%, 90%, 100% {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        transform: translate3d(3000px, 0px, 0px);
    }
    60% {
        opacity: 1;
        transform: translate3d(-25px, 0px, 0px);
    }
    75% {
        transform: translate3d(10px, 0px, 0px);
    }
    90% {
        transform: translate3d(-5px, 0px, 0px);
    }
    100% {
        transform: none;
    }
}

@keyframes animation-4 {
    0%, 60%, 75%, 90%, 100% {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        transform: translate3d(0px, 3000px, 0px);
    }
    60% {
        opacity: 1;
        transform: translate3d(0px, -20px, 0px);
    }
    75% {
        transform: translate3d(0px, 10px, 0px);
    }
    90% {
        transform: translate3d(0px, -5px, 0px);
    }
    100% {
        transform: translate3d(0px, 0px, 0px);
    }
}

@keyframes animation-5 {
    0% {
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes animation-6 {
    0% {
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes animation-7 {
    0%, 60%, 75%, 90%, 100% {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        transform: translate3d(0, -3000rpx, 0);
    }
    60% {
        opacity: 1;
        transform: translate3d(0, 50rpx, 0);
    }
    75% {
        transform: translate3d(0, -20rpx, 0);
    }
    90% {
        transform: translate3d(0, 10rpx, 0);
    }
    100% {
        transform: none;
    }
}

@keyframes animation-8 {
    0%, 60%, 75%, 90%, 100% {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        transform: translate3d(0, 3000rpx, 0);
    }
    60% {
        opacity: 1;
        transform: translate3d(0, -40rpx, 0);
    }
    75% {
        transform: translate3d(0, 20rpx, 0);
    }
    90% {
        transform: translate3d(0, -10rpx, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes animation-9 {
    0% {
        transform: translate3d(0px, -100%, 0px);
        visibility: visible;
    }
    100% {
        transform: translate3d(0px, 0px, 0px);
    }
}
@keyframes animation-10 {
    0% {
        transform: translatez(-100px) perspective(800rpx) rotate3d(0, 1, 0, 90deg);
        animation-timing-function: ease-in;
    }
    40% {
        transform: translatez(-100px) perspective(800rpx) rotate3d(0, 1, 0, -20deg);
        animation-timing-function: ease-in;
    }
    60% {
        transform: translatez(-100px) perspective(800rpx) rotate3d(0, 1, 0, 10deg);
    }
    80% {
        transform: translatez(-100px) perspective(800rpx) rotate3d(0, 1, 0, -5deg);
    }
    100% {
        transform: translatez(-100px) perspective(800rpx);
    }
}
@keyframes animation-11 {
    0% {
        transform: scale3d(1, 1, 1);
    }
    10%, 20% {
        transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    }
    30%, 50%, 70%, 90% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }
    40%, 60%, 80% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }
    100% {
        transform: scale3d(1, 1, 1);
    }
}
@keyframes animation-12 {
    0% {
        transform: translate3d(0px, 100%, 0px);
        visibility: visible;
    }
    100% {
        transform: translate3d(0px, 0px, 0px);
    }
}

@keyframes animation-13 {
    0% {
        transform-origin: left bottom;
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
    }
    100% {
        transform-origin: left bottom;
        transform: none;
        opacity: 1;
    }
}

@keyframes animation-14 {
    0% {
        transform-origin: right bottom;
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
    }
    100% {
        transform-origin: right bottom;
        transform: none;
        opacity: 1;
    }
}