以下是四段文字和一个头像的出场动画

文字分别从上下左右从无到有渐显出场，而头像从小到大旋转出场

/* 上到下入场 */
.text1 {
    animation: slideBottom 1s ease forwards;
    opacity: 0;
}

/* 左到右入场 */
.text2 {
    animation: slideRight 1s ease forwards;
    animation-delay: 0.2s;
    opacity: 0;
}

/* 右到左入场 */
.text3 {
    animation: slideLeft 1s ease forwards;
    animation-delay: 0.4s;
    opacity: 0;
}

/* 下到上入场 */
.text4 {
    animation: slideTop 1s ease forwards;
    animation-delay: 0.6s;
    opacity: 0;
}

/* 图像旋转+从小到大 */
.avatar {
    animation: combinedZoomAndRotate 5s cubic-bezier(0.23, 1, 0.32, 1) forwards;
    animation-delay: 0.8s;
    opacity: 0;
}

@keyframes slideRight {
    0% {
        transform: translateX(-100px);
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideLeft {
    0% {
        transform: translateX(100px);
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideTop {
    0% {
        transform: translateY(100px);
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideBottom {
    0% {
        transform: translateY(-100px);
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

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

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