Animation

CSS tools such as tailwindcss and unocss are recommended. They make UI customization easier and help build smaller CSS files on demand.

CSS animation classes in the default stylesheet.

CSS

Animation Classes

CSS
animation-iteration-count: infinite;animation-delay: 5s;animation-duration: 3s;

Class	Description	Loop
`animate-none`	Disable animation	-
`animate-spin`	Spin animation	Yes
`animate-ping`	Strong pulse	Yes
`animate-pulse`	Soft pulse	Yes
`animate-bounce`	Bounce animation	Yes
`animate-fade-in`	Fade in	-
`animate-fade-out`	Fade out	-
`animate-shake`	Shake animation	-
`animate-slide-to-top`	Slide upward	-
`animate-slide-to-bottom`	Slide downward	-
`animate-slide-to-left`	Slide left	-
`animate-slide-to-right`	Slide right	-

Animation Attributes

data-reveal

Set the data-reveal attribute on an element to make a container fade in. See the card reveal effect on the home page for details.

Different attribute values create different display delays. Supported forms:

data-reveal
data-reveal="2"
data-reveal="3"
data-reveal="4"

HTML
<!-- First fade-in item --><div class="card" data-reveal>...</div><!-- Second fade-in item --><div class="card" data-reveal="2">...</div><!-- Third fade-in item --><div class="card" data-reveal="3">...</div><!-- Fourth fade-in item --><div class="card" data-reveal="4">...</div>