Plumeria 0.19.0

type ViewTransitionOptions = {
  group?: CSSProperties;
  imagePair?: CSSProperties;
  new?: CSSProperties;
  old?: CSSProperties;
};
 
function viewTransition(options: ViewTransitionOptions): string;

import { css } from '@plumeria/core';

const fadeOut = css.keyframes({
  to: { opacity: 0 },
});

const fadeIn = css.keyframes({
  from: { opacity: 0 },
});

const longCrossFade = css.viewTransition({
  old: {
    animation: fadeOut,
    animationDuration: '2s',
  },
  new: {
    animation: fadeIn,
    animationDuration: '2s',
  },
});

export const transition = css.create({
  name: {
    viewTransitionName: longCrossFade,
  },
});

<ViewTransition name={transition.name}>
  {/* ... */}
</ViewTransition>