Keyframes and transitions, built in.
Define keyframe animations with the animate keyword:
animate pulse { 0% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.05); opacity: 1; } 100% { transform: scale(1); opacity: 0.8; } }
This compiles to a standard @keyframes CSS block.
Reference your animation name in a style block:
animate fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } section { style { animation fadeIn 0.6s ease-out } h1 "I fade in!" }
For simple state transitions, use the transition property in style blocks:
button { style { transition all 0.3s ease hover { transform scale(1.1) } } "Hover me" }
animate compiles to @keyframes. Transitions use CSS transition property. Both are scoped.