[css-anchor-position] custom @position-try should allow transform-origin and translate

[o-t-w]

When adding animations to elements making use of anchor positioning, it would be useful to be able to change the transform-origin and translate depending on the position of the anchor. This would be possible if a custom @position-try could include the transform-origin property.

This Codepen demonstrates the sort of effects developers may want to achieve that are dependent on transform-origin being set in the appropriate place. Here's an example of how broken the animation looks when flip-block repositions the popover.

An example of using tranlate: the following transition works well when a dropdown is shown below the button that opens it, but would look strange if the dropdown is above the button.

[popover]:popover-open {
  opacity: 1;
  translate: 0 0;
  transition: opacity .2s, translate .25s, display .25s allow-discrete, overlay .25s allow-discrete;
}

@starting-style {
  [popover]:popover-open {
    opacity: 0;
    translate: 0 -4px;
  }
}

I wanted it to look like the anchored popover was literally dropping down from the button, which only makes sense if it is below the button.

[amk221]

+1

Imagine a dropdown, that animates in a downwards fashion, when anchored beneath its target.
And therefore, it should animate upwards if being anchored above its target.

Currently this doesn't work:

[fantasai]

The decision to limit the properties in @position-try was very intentional, as these declarations don't interact properly with other declarations in the cascade. But there are a lot of use cases for styling things based on which area they end up in, so we're hoping that some form of conditional styling will be added for level 2.