animation Module API

The animation module provides functions for creating CSS animations, keyframes, and transitions for interactive user interfaces.

keyframes()

Creates CSS @keyframes rules and animation class from an animation configuration table.

Nixi.keyframes(animation)

Parameters:

• animation - Table with animation properties (name, from, to, duration, timing, delay, count, direction)

Returns: string - CSS @keyframes and animation class rules

local fade = Nixi.keyframes({
    name = "fadeIn",
    from = { opacity = "0" },
    to = { opacity = "1" },
    duration = 300,
    timing = "ease-out"
})
-- @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
-- .fadeIn { animation: fadeIn 300ms ease-out 0s 1 normal; }

Animation Table Properties

transition()

Returns pre-built transition CSS for named transitions.

Nixi.transition(name)

Parameters:

• name - Name of the pre-built transition

Returns: string - CSS keyframes and animation class

Nixi.transition("fade_in")
-- Returns fade-in keyframes CSS

Nixi.transition("bounce")
-- Returns bounce keyframes CSS

Available Transitions

all_transitions()

Returns CSS for all built-in transitions.

Nixi.all_transitions()

Returns: string - CSS for all default transitions

local all = Nixi.all_transitions()
-- Returns CSS for fade_in, fade_out, slide_in, slide_out, bounce, pulse, shake

animate()

Adds an animation class to an HTML element string.

Nixi.animate(element, animation_name)

Parameters:

• element - HTML string
• animation_name - Name of the animation class to add

Returns: string - Element with animation class added

local button = Nixi.button({ class = "btn" }, "Click")
local animated = Nixi.animate(button, "nixi-pulse")
-- <button class="nixi-pulse btn">Click</button>

Animation Properties Table

Transition Properties Table

Complete Example

package.path = "src/?.lua;src/?/init.lua;" .. package.path
local Nixi = require("nixi.init")

local app = Nixi.new({ port = 3000 })

local styles = [[
    <style>
        ]] .. Nixi.keyframes({
            name = "fadeIn",
            from = { opacity = "0", transform = "translateY(10px)" },
            to = { opacity = "1", transform = "translateY(0)" },
            duration = 500,
            timing = "ease-out"
        }) .. [[
        
        ]] .. Nixi.keyframes({
            name = "slideIn",
            from = { transform = "translateX(-50px)", opacity = "0" },
            to = { transform = "translateX(0)", opacity = "1" },
            duration = 400,
            timing = "ease-out"
        }) .. [[
        
        .fade-in {
            animation: fadeIn 500ms ease-out;
        }
        .slide-in {
            animation: slideIn 400ms ease-out;
        }
    </style>
]]

app:get("/", function(ctx)
    return Nixi.Layout({
        title = "Animated Page",
        body = Nixi.div({ class = "fade-in" },
            Nixi.h1(nil, "Animated Components"),
            Nixi.div({ class = "slide-in" },
                Nixi.p(nil, "This element slides in!")
            )
        ),
        head = styles
    })
end)

return app

Type Definitions

---@class Nixi.Animation
---@field name string
---@field from table
---@field to table
---@field duration number
---@field timing string
---@field delay number
---@field count number | "infinite"
---@field direction string

---@class Nixi
---@field keyframes fun(animation: Nixi.Animation): string
---@field transition fun(name: string): string
---@field all_transitions fun(): string
---@field animate fun(element: string, animation_name: string): string