How to use `transform` vs `top/left` for animations

        // Example of using transform for animations
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            transition: transform 0.5s;
        }

        .box:hover {
            transform: translateX(100px);
        }

        // Example of using top/left for animations
        .box2 {
            position: relative;
            width: 100px;
            height: 100px;
            background-color: blue;
            transition: top 0.5s;
        }

        .box2:hover {
            top: 50px; // This affects layout and can decrease performance
        }