style.css

.iphone14Pro {
    position: relative;
    margin: auto;
    width: 974px;
    height: 876px;
    overflow: hidden;
    background-image: url(https://www.apple.com.cn/v/iphone-14-pro/a/images/overview/dynamic-island/dynamic_hw__btl4fomgspyu_large.png);
}

.dynamic-island {
    width: 320px;
    margin-top: 72px;
    margin: 72px auto 0;
    background-color: #272729;
    height: 80px;
    border-radius: 40px;
    position: relative;
}

.dynamic-island::before {
    position: absolute;
    content: " ";
    right: 0;
    width: 80px;
    height: 100%;
    border-radius: 80px;
    background-color: #272729;
}


.long {
    animation: name duration timing-function delay iteration-count direction fill-mode;
    animation: long 900ms ease forwards;
}

@keyframes long {
    0% {}

    60% {
        width: 50vw;
    }

    80% {
        transform: scaleX(1.04);
    }

    100% {
        transform: scaleX(1);
        width: 50vw;
    }
}


.normal {
    animation: normal normal 900ms ease-in-out forwards;
}

@keyframes normal {
    0% {
        transform: scaleX(1);
        width: 50vw;
    }

    60% {
        transform: scaleX(1.3);
    }

    80% {}

    100% {
        width: 32.65vw;
    }
}

.divide {
    animation: divide-left 800ms ease-in-out forwards;
}

@keyframes divide-left {
    0% {}

    40% {
        transform: scaleX(1.1);
    }

    100% {
        transform: scaleX(1);
    }
}

.divide::before {
    animation: divide-right 800ms ease-in-out forwards;
}

@keyframes divide-right {
    0% {}

    40% {
        transform: scaleX(1.1);
    }

    100% {
        transform: scaleX(1);
        right: -100px;
    }
}

/* 融合 */
.fusion {
    animation: fusion-left 800ms ease-in-out forwards;
}

@keyframes fusion-left {
    0% {}

    40% {
        transform: scaleX(1.1);
    }

    100% {
        transform: scaleX(1);
    }
}

.fusion::before {
    animation: fusion-right 800ms ease-in-out forwards;
}

@keyframes fusion-right {
    0% {
        right: -100px;
    }

    40% {
        transform: scaleX(1.1);
    }

    100% {
        transform: scaleX(1);
        right: 0;
    }
}

/* 变大 */
.bigger {
    animation: bigger 800ms ease-in-out forwards;
}

@keyframes bigger {
    0% {}

    60% {
        width: 81vw;
        height: 400px;
        border-radius: 100px;
    }

    80% {
        transform: scaleX(1.04);
    }

    100% {
        width: 81vw;
        height: 400px;
        border-radius: 100px;
        transform: scaleX(1);
    }
}

.bigger::before {
    display: none;
}

.reset {
    animation: reset 1100ms ease-in-out forwards;
}

@keyframes reset {
    0% {
        width: 81vw;
        height: 400px;
        border-radius: 100px;
        transform: scaleX(1);
    }

    60% {
        transform: scaleX(1.04);

    }

    80% {
        width: 81vw;
        height: 400px;
        border-radius: 100px;
    }

    100% {}
}

.bigger::before {
    display: none;
}