Allow setting default duration in custom transition

[yhatt]

Allowed setting the default duration time of animation for specific custom transition. Declare --marp-transition-duration custom property in the first keyframe (from or 0%).

@keyframes marp-incoming-transition-triangle {
  from {
    /* Set the default duration time of "triangle" transition to 1s. */
    --marp-transition-duration: 1s;

    clip-path: polygon(0% 0%, 0% 0%, 0% 0%);
  }
  to {
    clip-path: polygon(0% 0%, 200% 0%, 0% 200%);
  }
}

@keyframes marp-incoming-transition-backward-triangle {
  from {
    /* The duration defined in a forwarding animation will be used in backward animation too. */
    /* A transition author also can set an individual default value to the backward transition. */
    /* --marp-transition-duration: 2.5s; */

    clip-path: polygon(100% 100%, 100% 100%, 100% 100%);
  }
  to {
    clip-path: polygon(-100% 100%, 100% -100%, 100% 100%);
  }
}

Memo for cross-browser support...

Inspecting the custom duration is working only in Chrome. It's OK in the experiment phase, but if API had supported other browsers, we have to consider about abusing an existing animatable property that takes a <custom-ident> value, such as grid-area.

For getting the state of --marp-transition-duration custom property directly in Firefox and Safari, either of CSS.registerProperty() or @property at-rule is required to mark the property interpolatable and make parsable the specific value within an animation keyframe. There are not supported in neither Firefox nor Safari too.

The bespoke template does never try to display the container of transition images as a grid container, so an abused grid-area property should not have any harmful effects. I hope no need to do this hack when API was marked as stable, but we may have to consider adding PostCSS plugin to transform the custom property just in case API is coming to Firefox and Safari.

[yhatt]

Chrome seems to bring animation jank if set not interpolatable value to the last keyframe. A custom transition with simple definition will set --marp-transition-duration to the last keyframe due to auto-reversed animation.

As a workaround, we will try to sanitize custom properties in <style> tag after prefetching keyframes. In @keyframes, properties with !important will be ignored.