/* 从左边淡入 */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-150px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 从右边边淡入 */
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(0);
    }

    to {
        opacity: 1;
        transform: translateX(-150px);
    }
}

/* 从上面淡入 */
@keyframes fadeInTop {
    from {
        opacity: 0;
        transform: translateY(-150px);
    }

    to {
        opacity: 1;
        transform: translateY(0px);
    }
}

/* 从下面淡入 */
@keyframes fadeInBottom {
    from {
        opacity: 0;
        transform: translateY(150px);
    }

    to {
        opacity: 1;
        transform: translateY(0px);
    }
}


/* 从右边边淡入(位置在中间) */
@keyframes fadeMidInRight {
    from {
        opacity: 0;
        transform: translateX(calc(50% + 100px));
        right: 50%;
    }

    to {
        opacity: 1;
        transform: translateX(50%);
        right: 50%;
    }
}


#phone_image {
    animation: fadeMidInRight 1.5s ease-in-out both;
}

@media screen and (min-width: 1024px) {
    #phone_image {
        animation: fadeInRight 1.5s ease-in-out both;
    }
}