Documentation
Documentation - Entertainment.
Discover Marssel: an intelligent, minimal configuration CSS framework designed for fast interfaces and a simplified developer experience.
Startup
Basic concepts
Utilities
Entertainment
The Marssel animation system allows you to create and use CSS animations in a simple way via classes or data attributes."
Basic setup
The AnimationManager is automatically initialized:
const marssel = new Marssel();
// The AnimationManager is ready to usePredefined animations
Marssel includes 27 ready-to-use animations:
| Category | Animation | Description |
|------------------------------|---------------------------- |----------------------------------------------|
| Inputs/Outputs | fadeIn / fadeOut | Fade in/out |
| Inputs/Outputs | slideInLeft / slideOutLeft | Swipe from/to the left |
| Inputs/Outputs | slideInRight / slideOutRight | Swipe from/to the right |
| Inputs/Outputs | slideInUp / slideOutUp | Swipe from/up |
| Inputs/Outputs | slideInDown / slideOutDown | Swipe from/down |
| Inputs/Outputs | zoomIn / zoomOut | Zoom in/out with fade |
| Inputs/Outputs | bounceIn / bounceOut | Bouncing entry/exit |
| Inputs/Outputs | rotateIn / rotateOut | Rotation in/out |
| Motion effects | bounce | Vertical bounce |
| Motion effects | pulse | Pulsation (scale) |
| Motion effects | shake | Horizontal shake |
| Motion effects | wobble | Complex oscillation |
| Motion effects | swing | Swaying |
| Motion effects | rubberBand | Elastic effect |
| Motion effects | jello | Gelatinous effect |
| Motion effects | tada | Celebration effect |
| Rotations and special effects | spin | 360° rotation |
| Rotations and special effects | flip | 3D Flip |
| Rotations and special effects | flash | Flashing |
| Rotations and special effects | heartBeat | Heartbeat |Basic syntax
<div class="element---[animation-[nomAnimation]]">
Animated content
</div>Available properties
| Property | Description |
|-----------------------------------|------------------------------------------------------------------|
| animation-[nom] | Animation name |
| animation-duration-[durée] | Duration (e.g.: 2s, 500ms) |
| animation-timing-[fonction] | Timing function (ease, linear, ease-in-out, etc.) |
| animation-delay-[délai] | Delay before start |
| animation-iteration-[nombre] | Number of repetitions (or infinite) |
| animation-direction-[direction] | Direction (normal, reverse, alternate, alternate-reverse) |
| animation-fill-[mode] | Fill mode (none, both forwards, backwards, backwards) |Examples
Button
Map
Box that pulses
Animation on medium screens and more
⚙️
Custom animation
<div class="btn---[animation-[fadeIn]]">
Button
</div>
<!-- Animation with duration -->
<div class="card---[animation-[bounce]+animation-duration-[2s]]">
Map
</div>
<!-- Full animation -->
<div class="box---[animation-[pulse]+animation-duration-[1.5s]+animation-timing-[ease-in-out]+animation-iteration-[infinite]]">
Box that pulses
</div>
<!-- Animation with pseudo-class -->
<button class="btn-shake---[animation-[shake]+animation-duration-[1.5s]+animation-timing-[ease-in-out]+animation-iteration-[infinite]]:hover">
Shake on hover
</button>
<!-- Responsive animation -->
<div class="md--element---[animation-[zoomIn]+animation-duration-[1s]]">
Animation on medium screens and more
</div>
<!-- Animation loader -->
<div class="loader---[
animation-[spin]+
animation-duration-[1s]+
animation-iteration-[infinite]+
animation-timing-[linear]+
w-[fit-content]
]">
⚙️
</div>
<div
data-animation="maPersoAnim"
data-animation-keyframes='{
"0%": {
"transform": "translateX(0)",
"opacity": "1"
},
"50%": {
"transform": "translateX(100px)",
"opacity": "0.5"
},
"100%": {
"transform": "translateX(0)",
"opacity": "1"
}
}'
data-animation-duration="2s"
data-animation-iteration="infinite">
Custom animation
</div>Use with data-attributes
<div
data-animation="nomAnimation"
data-animation-duration="1s"
data-animation-timing="ease"
data-animation-delay="0s"
data-animation-iteration="1"
data-animation-direction="normal"
data-animation-fill="none">
Content
</div>
| Attribute | Description | Default value |
|---------------------------------------|------------------------------------------|------------------------------|
| data-animation | Animation name (required) | - |
| data-animation-duration | Duration | 1s |
| data-animation-timing | Timing function | ease |
| data-animation-delay | Deadline | 0s |
| data-animation-iteration | Number of repetitions | 1 |
| data-animation-direction | Direction | normal |
| data-animation-fill | Filling method | none |
| data-animation-on-end | Action at the end | - |End of animation actions
Via data-animation-on-end : remove : Remove the element from the DOM hide : Hide the element (display: none) reset : Resets and replays the animation nomFonction : Calls a global JavaScript function
<!-- Simple animation -->
<div data-animation="fadeIn">
Content
</div>
<!-- Infinite Animation -->
<div
data-animation="bounce"
data-animation-duration="1s"
data-animation-iteration="infinite">
Continuous rebound
</div>
<!-- Animation with callback -->
<div
data-animation="slideInLeft"
data-animation-on-end="hide">
Disappears after animation
</div>Create custom animations via data-attributes
Custom animation
<div
data-animation="maPersoAnim"
data-animation-keyframes='{
"0%": {
"transform": "translateX(0)",
"opacity": "1"
},
"50%": {
"transform": "translateX(100px)",
"opacity": "0.5"
},
"100%": {
"transform": "translateX(0)",
"opacity": "1"
}
}'
data-animation-duration="2s"
data-animation-iteration="infinite">
Custom animation
</div>Create custom animations via JavaScript - Simple method
A simple button with background and text
// Set animation
marssel.animationManager.addAnimation('monAnimation', {
'0%': {
transform: 'scale(1) rotate(0deg)',
backgroundColor: '#FF0000'
},
'50%': {
transform: 'scale(1.5) rotate(180deg)',
backgroundColor: '#00FF00'
},
'100%': {
transform: 'scale(1) rotate(360deg)',
backgroundColor: '#FF0000'
}
});
const animStyles = marssel.animationManager.animationStyles;
// 1. Create a simple transition
animStyles.createTransitionAnimation('myFade',
{ opacity: 0, transform: 'scale(0.8)' },
{ opacity: 1, transform: 'scale(1)' },
4 // 4 étapes
);
// 2. Create a looping animation
animStyles.createLoopAnimation('colorLoop', [
{ backgroundColor: '#FF0000' },
{ backgroundColor: '#00FF00' },
{ backgroundColor: '#0000FF' },
{ backgroundColor: '#FF0000' }
]);
// 3. Create a breathing animation
animStyles.createBreathingAnimation('breathe', 1, 1.1, 4);
// 4. Create a Blink
animStyles.createBlinkAnimation('blink', '1s', 3);
// 5. Create a custom sequence
animStyles.createSequenceAnimation('customSeq', [
{ at: '0%', state: { transform: 'translateX(0)' } },
{ at: '25%', state: { transform: 'translateX(100px)' } },
{ at: '50%', state: { transform: 'translateY(100px)' } },
{ at: '75%', state: { transform: 'translateX(0)' } },
{ at: '100%', state: { transform: 'translateY(0)' } }
]);JavaScript API: AnimationManager
Saves a new animation: addAnimation(name, keyframes)
marssel.animationManager.addAnimation('customFade', {
'from': { opacity: 0 },
'to': { opacity: 1 }
});JavaScript API: addAnimation()
Saves a new animation: addAnimation(name, keyframes)
marssel.animationManager.addAnimation('customFade', {
'from': { opacity: 0 },
'to': { opacity: 1 }
});JavaScript API: triggerAnimation()
Triggers an animation on an element: triggerAnimation(element, animationName, options)
const box = document.querySelector('.box');
marssel.animationManager.triggerAnimation(box, 'bounce', {
duration: '2s',
timing: 'ease-out',
delay: '0.5s',
iteration: '3',
direction: 'alternate',
fillMode: 'forwards'
});JavaScript API: registerKeyframes()
Registers keyframes: registerKeyframes(name, keyframes)
marssel.animationManager.animationStyles.registerKeyframes('myAnim', {
'0%': { transform: 'scale(1)' },
'100%': { transform: 'scale(2)' }
});JavaScript API: createTransitionAnimation()
Creates an interpolated transition: createTransitionAnimation(name, fromState, toState, steps)
marssel.animationManager.animationStyles.createTransitionAnimation(
'smoothGrow',
{ width: '100px', height: '100px' },
{ width: '200px', height: '200px' },
5
);JavaScript API: createLoopAnimation()
Creates a loop animation: createLoopAnimation(name, states)
marssel.animationManager.animationStyles.createLoopAnimation('rainbow', [
{ color: '#FF0000' },
{ color: '#FF7F00' },
{ color: '#FFFF00' },
{ color: '#00FF00' },
{ color: '#0000FF' },
{ color: '#4B0082' },
{ color: '#9400D3' },
{ color: '#FF0000' }
]);JavaScript API: getAllAnimations()
Get the list of all animations: getAllAnimations()
const animations = marssel.animationManager.animationStyles.getAllAnimations();
console.log('Animations disponibles:', animations);JavaScript API: getStats()
Gets animation statistics: getStats()
const stats = marssel.animationManager.animationStyles.getStats();
console.log(stats);
// { totalKeyframes: 30, predefinedCount: 27, customCount: 3 }