Skip to content

Ssstyles › Animations

Source

This is a collection of pre-defined animations.

You need to import the CSS file and assign the data attribute to use them.

@import "ssstyles/css/animations.css" layer(components);

# Sparkle

I'm just a little bit <em data-sparkle>extra</em>

I'm just a little bit extra

# Fade in

This animation lets the element fade in fron the bottom when scrolling into the viewport.

<div data-card data-fade-in>Let the ruling classes tremble at a layered revolution.</div>
<div data-card data-fade-in>The element selectors have nothing to lose but their specificity.</div>
<div data-card data-fade-in>They have a stylesheet to win.</div>
Let the ruling classes tremble at a layered revolution.

The element selectors have nothing to lose but their specificity.

They have a document to win.