Use @supports with a proxy feature/value for features you can’t test for (@starting-style)

You can’t use @supports to feature test for @starting-style. But what we can do, is use another, different property value pair, that is a good proxy for the level of support we need. In this case, I know that @starting-style came out in Safari 17.5, and at the same time, text-wrap-style was introduced in Safari 17.5, so although using a different declaration with @supports, we can ensure that our styles only get applied when relevant. In this instance you could nest a @supports block inside the selector like this:

@supports (text-wrap-style: auto) {
    opacity: 1;
    transform: none;
    transition: all 0.5s ease-in-out;
    @starting-style {
        opacity: 0;
        transform: translateX(-20px);
    }
}

Not a perfect solution but one I have found useful and robust enough to share.