Home / Core Concepts / Animations

Animations

Nixi includes a built-in animation system for creating CSS keyframes and transitions without writing CSS manually.

Overview

The animation module provides:

Generating Keyframes

local animation_css = Nixi.keyframes({
    name = "fade-in",
    from = { opacity = "0" },
    to = { opacity = "1" },
    duration = 300,
    timing = "ease-out",
    delay = 0,
    count = 1,
    direction = "normal"
})

Output:

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
.fade-in {
    animation: fade-in 300ms ease-out 0s 1 normal;
}

Animation Properties

Property Type Default Description
name string "unnamed" Animation name
from table {} Starting properties
to table {} Ending properties
duration number 300 Duration in milliseconds
timing string "ease" Timing function
delay number 0 Delay in milliseconds
count number/"infinite" 1 Repetition count
direction string "normal" Animation direction

Pre-built Transitions

Nixi includes common transitions ready to use:

Name Effect Duration
fade_in Opacity 0→1 200ms
fade_out Opacity 1→0 200ms
slide_in Slide down + fade 300ms
slide_out Slide up + fade 200ms
bounce Scale bounce 150ms
pulse Continuous pulse 100ms
shake Horizontal shake 100ms

Using Pre-built Transitions

-- Get single transition
local fade_css = Nixi.transition("fade_in")

-- Get all transitions
local all_css = Nixi.all_transitions()

-- Include in Layout head
return Nixi.Layout({
    title = "Page",
    body = content,
    head = "<style>" .. Nixi.all_transitions() .. "</style>"
})

Applying Animations

-- Add animation class to element
local animated = Nixi.animate(element, "nixi-fade-in")

Timing Functions Reference

Function Description
ease Slow start, fast middle, slow end
linear Constant speed
ease-in Slow start
ease-out Slow end
ease-in-out Slow start and end