Package com.oorian.css.transitions

Class TransitionSequence

java.lang.Object
com.oorian.css.transitions.TransitionSequence
public class TransitionSequence extends Object
A sequence of transition steps that play one after another using CSS keyframe animations.

TransitionSequence binds to a single element and orchestrates multiple transition steps by building a @keyframes animation. Each step maps to a percentage range based on its duration relative to the total sequence duration. This approach allows the same CSS property (e.g., transform) to be animated in multiple steps, unlike CSS transitions which only support one delay per property name.

How it works:

  1. Snapshots the element's initial CSS state for all properties that will be animated
  2. Walks through steps, maintaining a running state. At each step boundary, captures the state as a keyframe at the appropriate percentage
  3. Creates a @keyframes animation from the percentage-based snapshots
  4. Applies the animation to the element via StyledElement.animate(Animation)

Usage:


 TransitionSequence seq = new TransitionSequence(element);

 // Step 1: Fade in
 seq.add(new Fade().setTo(1f).setDuration(0.3f));

 // Step 2: Move right and round corners (two transitions play as one step)
 seq.add(
     new Move().setX(300).setDuration(0.5f),
     new Reshape().setBorderRadius(12).setDuration(0.5f));

 // Step 3: Scale up and change color
 seq.add(
     new Move().setX(300).setScale(1.4f).setDuration(0.4f),
     new ColorShift().setTo("#10b981").setDuration(0.4f));

 seq.play();       // animations play via @keyframes
 seq.reverse();    // animations reverse via @keyframes
Since:
2026
Version:
1.0
Author:
Marvin P. Warble Jr.
See Also:

  • Constructor Details

    • TransitionSequence

      public TransitionSequence(StyledElement<?> element)
      Constructs a TransitionSequence bound to a single element.

      All steps added to this sequence will animate the given element.

      Parameters:
      element - the element to animate

  • Method Details

    • add

      public TransitionSequence add(Transition... transitions)
      Adds a step consisting of one or more transitions that play simultaneously.

      When multiple transitions are passed, they all apply during the same step. The step's duration is the maximum duration among all transitions. This allows combining different effects (e.g., movement with color change) in a single step.

      
 // Single transition step
 seq.add(new Fade().setTo(1f).setDuration(0.3f));

 // Multiple transitions in one step
 seq.add(
     new Move().setX(200).setDuration(0.5f),
     new Reshape().setBorderRadius(12).setDuration(0.5f));
      Parameters:
      transitions - one or more transitions to play simultaneously
      Returns:
      this sequence for method chaining

    • play

      public void play()
      Plays the sequence forward using CSS @keyframes animations.

      Builds a keyframes animation from all steps and applies it to the element. The element retains its final state via animation-fill-mode: forwards.

    • reverse

      public void reverse()
      Plays the sequence in reverse using CSS @keyframes animations.

      Builds keyframes with the steps in reverse order so that the element animates back to its initial state. Uses a different animation name to force the browser to restart the animation.