A lightweight, powerful theming system with enhanced animations and styles
Choose a color theme for the interface.
Choose a visual style for the interface components.
Hover over these elements to see style-specific animations
<body data-theme="light" data-style="flat">
<!-- Your content here -->
</body>This card shows various UI elements with the selected theme and style.
This card demonstrates text styling, links and status colors.
This is a sample link that demonstrates the hover effect. Links are styled differently based on the selected style variant.
Primary text - Used for main content
Secondary text - Used for descriptions and less important content
Tertiary text - Used for hints and additional information
Buttons with different status styles and hover effects.
Dividers also adapt to the style
code element
Code blocks match the theme
Interactive elements and how they respond to user input.
Click on the buttons to see different animation effects.
This box will animate when you click a button above
Add the data-animate attribute to any HTML element:
<div data-animate="fade-in">This content will fade in</div>
<p data-animate="fade-up">This paragraph will fade up</p>You can also apply animations with JavaScript:
// Get element
const element = document.querySelector('#myElement');
// Apply animation
DataCSSEffects.animate(element, 'fade-up', {
delay: 0.5, // Optional delay in seconds
duration: 1.2, // Optional duration in seconds
timing: 'ease-out' // Optional timing function
});Draw attention to elements with these eye-catching animations.
This box will animate when you click a button above
Combine animations with timing utility classes:
.duration-300 → 0.3s.duration-500 → 0.5s.duration-800 → 0.8s.ease .ease-in .ease-out.elastic .spring .linear<div data-animate="bounce" class="duration-800 spring">
Bounces for 0.8s with spring easing
</div>Elements animate one after another with increasing delays.
Add data-stagger to the parent and data-animate to each child:
<ul data-stagger="medium">
<li data-animate="fade-in">First item</li>
<li data-animate="fade-in">Second item</li>
<li data-animate="fade-in">Third item</li>
</ul>Available stagger types:
fast - 0.1s between itemsmedium - 0.2s between itemsslow - 0.3s between itemscascade - increasing duration for each itemreverse - last items animate firstrandom - random delays for each itemOr use the JavaScript API for more control:
// Animate multiple elements with staggered timing
const elements = document.querySelectorAll('.my-items');
DataCSSEffects.animateGroup(elements, 'fade-up', {
startDelay: 0.2, // Wait before starting
staggerDelay: 0.15, // Delay between items
duration: 0.8 // Duration for each animation
});Elements animate when they enter the viewport as you scroll down.
This element fades in when you scroll to it
This element fades up when you scroll to it
This element slides in from the left
This element slides in from the right
This element scales up as it fades in
This element rotates into position
Add the data-scroll attribute to elements you want to reveal on scroll:
<div data-scroll="reveal">Fades in when scrolled into view</div>
<div data-scroll="reveal-up">Fades up when scrolled into view</div>
<div data-scroll="reveal-left">Slides in from left</div>
<div data-scroll="reveal-right">Slides in from right</div>
<div data-scroll="reveal-scale">Scales into view</div>
<div data-scroll="reveal-rotate">Rotates into position</div>Add the data-scroll-repeat attribute to make the animation replay each time the element comes into view.
Smooth transitions between views using the modern View Transition API.
Click any button above to see smooth View Transitions API effects
Modern browsers will use the View Transitions API for silky smooth transitions
Use the modern View Transition API for seamless transitions:
// Using View Transition API for smooth transitions
DataCSSEffects.viewTransition('fade', () => {
// Update your UI here
document.querySelector('#content').innerHTML = newContent;
});For multi-page (cross-document) transitions, you can use:
// Add this CSS to enable view transitions between pages
@view-transition {
animation-duration: 0.6s;
}
// Then trigger a transition before navigation
DataCSSEffects.viewTransition('fade', () => {
window.location.href = 'new-page.html';
});Available transition types:
fade, zoom, flip, rotatecrossfade