Transitions, Animations & Hover States
RTXUI supports CSS-style transitions, keyframe animations and interactive pseudo-classes on DOM elements. This allows you to build terminal applications with smooth color shifts, expanding borders, pulsing indicators and responsive mouse effects without writing manual frame updates.
1. Interactive Pseudo-Classes
You can define styles that apply only under specific user interaction states:
:hover: Active when the mouse cursor is hovering over the element or its children.:active: Active while the element is being clicked/pressed.:focus: Active when the element has captured keyboard focus.
Example Rulesets
.button {
background-color: rgb(30, 58, 138); /* Slate Blue */
}
.button:hover {
background-color: rgb(29, 78, 216); /* Bright Blue on hover */
}
.button:active {
background-color: rgb(30, 64, 175); /* Dark Blue on click */
}Minimal Interactive Demo
Below is the interactive tab view for :hover, :active, and :focus pseudo-classes:
2. CSS Transitions
The transition property configures how style attributes interpolate smoothly over time instead of changing instantly.
Shorthand Syntax
transition: <property> <duration> [<timing-function>] [<delay>]You can declare multiple property transitions by separating them with commas, or use the keyword all to animate all supported variables:
transition: background-color 0.2s ease-in-out, width 0.3s ease-out;Animatable Properties
- Dimensions:
width,height(e.g.20to40cells). - Offsets:
top,right,bottom,left(or shorthandinset), which move a positioned element. Prefer moving sideways: a terminal has more columns than rows, so a horizontal move takes smaller steps. - Translation:
translate, which moves any box without moving what is around it. Its percentages are of the box's own size, sofrom { translate: calc(100% + 2); }slides a box in from just past its own right edge, whatever its width. - Borders:
border-top-color,border-right-color,border-bottom-color,border-left-color(or shorthandborder-color). - Colors & Opacities:
color,background-color,opacity. - Flex Constraints:
flex-grow,flex-shrink.
Colors, opacities and translate are the cheapest to animate: they move or resize nothing else, so while they are all that is animating, each frame keeps the last layout and only repaints. Prefer them to sizes and offsets when either would do.
Easing Functions
linearease(Default curve)ease-inease-outease-in-out- Sine curves:
ease-in-sine,ease-out-sine,ease-in-out-sine - Quad curves:
ease-in-quad,ease-out-quad,ease-in-out-quad - Cubic curves:
ease-in-cubic,ease-out-cubic,ease-in-out-cubic - Quart curves:
ease-in-quart,ease-out-quart,ease-in-out-quart - Quint curves:
ease-in-quint,ease-out-quint,ease-in-out-quint - Expo curves:
ease-in-expo,ease-out-expo,ease-in-out-expo - Circ curves:
ease-in-circ,ease-out-circ,ease-in-out-circ - Back curves:
ease-in-back,ease-out-back,ease-in-out-back cubic-bezier(x1, y1, x2, y2)(Defines a custom cubic Bézier easing curve)- Steps:
steps(n)holds each value for1/nof the time, then jumps to the next;steps(n, start)jumps at the start of each step instead.step-startandstep-endaresteps(1, start)andsteps(1). Terminal cells are discrete, so steps often look cleaner than a smooth curve.
Minimal Transition Demo
Below is the interactive tab view for background-color and border-color transitions:
3. Keyframe Animations
A transition needs a change of state to run. An animation runs on its own as soon as an element declares it, which suits indicators: a pulsing status light, a loading bar, a blinking cursor.
@keyframes names a sequence of styles, and animation plays it:
@keyframes pulse {
from { color: rgb(35, 134, 54); }
to { color: rgb(126, 231, 135); }
}
.light {
animation: pulse 0.8s ease-in-out infinite alternate;
}Shorthand Syntax
animation: <name> <duration> [<timing-function>] [<delay>] [<iteration-count>]
[<direction>] [<fill-mode>] [<play-state>]The parts may come in any order: the first time is the duration and the second the delay. Each also has its own longhand, animation-name, animation-duration, and so on (see the CSS reference).
iteration-count: a number, orinfinite.direction:normal,reverse,alternate(forwards, then backwards) oralternate-reverse.fill-mode:forwardsholds the last keyframe once the animation ends,backwardsshows the first one during the delay,bothdoes both. With the default,none, the properties go back to their own values.play-state:pausedfreezes the animation where it is;runningresumes it from there.
Keyframes
Blocks are selected by from, to or a percentage, several at once when comma-separated (0%, 100% { ... }). A property missing from the first or the last block animates from, or to, the element's own value. A block can declare its own animation-timing-function, which eases the way from it to the next block:
@keyframes blink {
from { opacity: 1; }
50% { opacity: 0; }
}
.cursor { animation: blink 1s step-end infinite; }Keyframes animate the same properties as transitions (listed above). Anything else in a block is reported as a diagnostic, as is an animation whose name matches no @keyframes.
Where Keyframes Are Found
Like every other rule, @keyframes belong to the component that declares them: an animation looks for its keyframes in the stylesheet of the component whose rule declared it, and nowhere else. A component can still animate a child component's tag from its own stylesheet, since the tag is part of its own template.
Lifetime
- An animation starts when an element starts declaring it, and keeps running when the component re-renders.
- Changing its duration, easing or play state does not restart it. Removing it (for example by removing the class that declares it) stops it; adding it back starts it again from the beginning.
- An element with
display: none, or inside one, runs no animation. Its animations start from the beginning once it is displayed, so an element that appears plays them in full, and a hidden one costs no redraws. - While any animation plays, the screen keeps redrawing. A headless run waits for finite animations to end, but not for
infiniteones. - A length animates smoothly between cells, percentages and
calc(), in any mix (50%to10iscalc(25% + 5)halfway). From or toauto, it jumps at the end.
Animation End
onanimationend runs a handler once one of the element's animations finishes, as onclick does on a click. It does not run for an infinite animation, nor for one removed before its end. Use it to act after an exit animation, such as removing the item that just faded out:
<div class="{row_class}" onanimationend="Removed">{label}</div><toast> uses it to hide only once it has slid out.
Keyframes Demo
Translate Demo
Cards lift through a translate transition when hovered or focused, and each task slides out of its list once done, removed by onanimationend:
4. Advanced Transition Examples
Primary Animation & Flex Layout Demo
Hover over the Hover Me button and click Grow Me to observe interactive transitions reflow the flex container:
Component-Level Transition Demos
- Slider Transition: Smooth track and thumb focus highlighting. (See Slider Demo)
- Checkbox Transition: Background check state changes. (See Checkbox Demo)
- Dropdown Select Menu: Highlight shifts. (See Select Demo)