css关键帧动画文字飞入并缩放

.title{
    color: #fff;
    position: absolute;
    left: 50%;
    bottom: 55%;
    transform: translateX(-50%);
    opacity: 0;
    animation: appear 0.5s ease-out 1.5s forwards, scale 2s infinite 0.5s;

    @keyframes appear {
        0% {
            bottom: 55%;
            font-size: 50rpx;
            opacity: 0;
        }

        100% {
            bottom: 85%;
            font-size: 40rpx;
            opacity: 1;
        }
    }


    @keyframes scale {
        0% {
            transform: translateX(-50%) scale(0.9);
        }

        50% {
            transform: translateX(-50%) scale(1.1);
        }

        100% {
            transform: translateX(-50%) scale(0.9);
        }
    }
}