CSS Animations

CSS Animations

TesseraUI includes a full CSS animation engine supporting hover transitions and @keyframes animations with easing, looping, and alternation.

Animatable properties: background, border-color, color, opacity (keyframes only).

---

Transitions

A transition smoothly interpolates a CSS property when an element's state changes (currently: hover).

Syntax

transition: <property> <duration> [<easing>] [<delay>];

/* Multiple properties — comma-separated */
transition: background 250ms ease-out, border-color 250ms ease-out;

Token	Values
<property>	background, border-color, color, all
<duration>	250ms, 0.25s
<easing>	linear, ease, ease-in, ease-out, ease-in-out (default: ease)
<delay>	100ms, 0.1s (default: 0)

Example

.card {
  background:  #1e2433;
  border: 1px solid #b87333;
  transition: background 250ms ease-out, border-color 250ms ease-out;
}

.card:hover {
  background:   #2a3450;
  border-color: #e8a24a;
}

The background and border-color transition smoothly over 250 ms with an ease-out curve when the mouse enters or leaves the card.

---

@keyframes

Define keyframe animations and apply them with the animation property.

Defining keyframes

@keyframes <name> {
  from { <properties> }
  <percent>% { <properties> }
  to   { <properties> }
}

Supported stop positions: from (= 0%), any integer percentage, to (= 100%).

@keyframes pulse {
  from { background: #1a2a1a; border-color: #22c55e; }
  50%  { background: #14532d; border-color: #4ade80; }
  to   { background: #1a2a1a; border-color: #22c55e; }
}

@keyframes flash {
  from { background: #1e1e3a; border-color: #3b82f6; }
  to   { background: #1e3a7a; border-color: #60a5fa; }
}

@keyframes fade-in {
  from { background: #3a1a1a; border-color: #ef4444; }
  to   { background: #1e2433; border-color: #b87333; }
}

Applying an animation

animation: <name> <duration> [<easing>] [<delay>] [<iterations>] [alternate];

Token	Values	Notes
<name>	keyframe name	Must match a defined @keyframes block
<duration>	1500ms, 1.5s	Total duration of one cycle
<easing>	linear, ease, ease-in, ease-out, ease-in-out	Default: ease
<delay>	200ms, 0.2s	Delay before start (default: 0)
<iterations>	integer or infinite	Number of cycles; infinite = loop forever
alternate	keyword	Reverse direction on odd cycles

Examples

/* Infinite loop — heartbeat effect */
.card-live {
  background: #1a2a1a;
  border: 1px solid #22c55e;
  animation: pulse 1500ms ease-in-out infinite;
}

/* Infinite loop, reverse on alternating cycles — flicker */
.card-flash {
  background: #1e1e3a;
  border: 1px solid #3b82f6;
  animation: flash 800ms ease-in-out infinite alternate;
}

/* Single shot — plays once on screen open */
.card-fadein {
  background: #1e2433;
  border: 1px solid #b87333;
  animation: fade-in 600ms ease-out 1;
}

---

Easing functions

TesseraUI implements all five standard CSS easing functions using cubic-Bézier curves with Newton-Raphson + bisection solving:

Keyword	Cubic-Bézier
linear	(0.0, 0.0, 1.0, 1.0)
ease	(0.25, 0.1, 0.25, 1.0)
ease-in	(0.42, 0.0, 1.0, 1.0)
ease-out	(0.0, 0.0, 0.58, 1.0)
ease-in-out	(0.42, 0.0, 0.58, 1.0)

---

Combining transitions and keyframes

A panel can have both a hover transition and a @keyframes animation at the same time. Animated values are layered: keyframe values take priority over transition values when both are active.

.live-card {
  background: #1a2a1a;
  border: 1px solid #22c55e;
  /* Keyframe animation runs continuously */
  animation: pulse 1500ms ease-in-out infinite;
  /* Hover transition runs on top */
  transition: border-color 150ms ease-out;
}
.live-card:hover { border-color: #4ade80; }

---

flex: 1 and min-height on animated cards

When placing animated cards inside a <row>, always add flex: 1 and a min-height so the flex layout distributes width correctly:

.card-live {
  flex: 1;
  min-height: 40px;
  animation: pulse 1500ms ease-in-out infinite;
}

Without flex: 1, each card claims the full row width instead of sharing it equally.
Without min-height, cards may collapse to the row's initial natural height (12 px) before the layout auto-sizes.

---

Java API

The animation engine is fully automatic — no Java code required when using HTML templates. For programmatic panels:

// Apply CSS transitions
TesseraStyle base  = /* resolved base style  */;
TesseraStyle hover = /* resolved hover style */;
panel.cssTransitions(style.transitions, base, hover);

// Start a @keyframes animation
panel.cssAnimation(style.animations, sheet);