long-transition.html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Document</title>
    <style>
        .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;
            transition:width cubic-bezier(0.3, 2, 0.73, 1)  0.8s;
        }

        .dynamic-island:hover {
            width: 50vw;
        }
    </style>
</head>

<body>
    <div class="iphone14Pro">
        <div class="dynamic-island"> </div>
    </div>
    <script>

    </script>
</body>

</html>