Documentation
Documentation - Animations.
Découvrez Marssel : un framework CSS intelligent, configuration minimale, conçu pour des interfaces rapides et une expérience développeur simplifiée.
Démarrage
Concepts de base
Utilitaires
Animations
Le système d'animation de Marssel permet de créer et d'utiliser des animations CSS de manière simple via des classes ou des attributs data."
Configuration de base
Le AnimationManager est automatiquement initialisé :
const marssel = new Marssel();
// Le AnimationManager est prêt à l'emploiAnimations prédéfinies
Marssel inclut 27 animations prêtes à l'emploi :
| Catégorie | Animation | Description |
|------------------------------|---------------------------- |----------------------------------------------|
| Entrées/Sorties | fadeIn / fadeOut | Apparition/disparition en fondu |
| Entrées/Sorties | slideInLeft / slideOutLeft | Glissement depuis/vers la gauche |
| Entrées/Sorties | slideInRight / slideOutRight | Glissement depuis/vers la droite |
| Entrées/Sorties | slideInUp / slideOutUp | Glissement depuis/vers le haut |
| Entrées/Sorties | slideInDown / slideOutDown | Glissement depuis/vers le bas |
| Entrées/Sorties | zoomIn / zoomOut | Zoom avant/arrière avec fondu |
| Entrées/Sorties | bounceIn / bounceOut | Entrée/sortie rebondissante |
| Entrées/Sorties | rotateIn / rotateOut | Rotation d'entrée/sortie |
| Effets de mouvement | bounce | Rebond vertical |
| Effets de mouvement | pulse | Pulsation (scale) |
| Effets de mouvement | shake | Secousse horizontale |
| Effets de mouvement | wobble | Oscillation complexe |
| Effets de mouvement | swing | Balancement |
| Effets de mouvement | rubberBand | Effet élastique |
| Effets de mouvement | jello | Effet gélatineux |
| Effets de mouvement | tada | Effet de célébration |
| Rotations et effets spéciaux | spin | Rotation 360° |
| Rotations et effets spéciaux | flip | Retournement 3D |
| Rotations et effets spéciaux | flash | Clignotement |
| Rotations et effets spéciaux | heartBeat | Battement de cœur |Syntaxe de base
<div class="element---[animation-[nomAnimation]]">
Contenu animé
</div>Propriétés disponibles
| Propriété | Description |
|-----------------------------------|------------------------------------------------------------------|
| animation-[nom] | Nom de l'animation |
| animation-duration-[durée] | Durée (ex : 2s, 500ms) |
| animation-timing-[fonction] | Fonction de timing (ease, linear, ease-in-out, etc.) |
| animation-delay-[délai] | Délai avant démarrage |
| animation-iteration-[nombre] | Nombre de répétitions (ou infinite) |
| animation-direction-[direction] | Direction (normal, reverse, alternate, alternate-reverse) |
| animation-fill-[mode] | Mode de remplissage (none, forwards, backwards, both) |Exemples
Bouton
Carte
Box qui pulse
Animation sur écrans moyens et plus
⚙️
Animation personnalisée
<div class="btn---[animation-[fadeIn]]">
Bouton
</div>
<!-- Animation avec durée -->
<div class="card---[animation-[bounce]+animation-duration-[2s]]">
Carte
</div>
<!-- Animation complète -->
<div class="box---[animation-[pulse]+animation-duration-[1.5s]+animation-timing-[ease-in-out]+animation-iteration-[infinite]]">
Box qui pulse
</div>
<!-- Animation avec pseudo-classe -->
<button class="btn-shake---[animation-[shake]+animation-duration-[1.5s]+animation-timing-[ease-in-out]+animation-iteration-[infinite]]:hover">
Shake au survol
</button>
<!-- Animation responsive -->
<div class="md--element---[animation-[zoomIn]+animation-duration-[1s]]">
Animation sur écrans moyens et plus
</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">
Animation personnalisée
</div>Utilisation avec 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">
Contenu
</div>
| Attribut | Description | Valeur par défaut |
|---------------------------------------|------------------------------------------|------------------------------|
| data-animation | Nom de l'animation (requis) | - |
| data-animation-duration | Durée | 1s |
| data-animation-timing | Fonction de timing | ease |
| data-animation-delay | Délai | 0s |
| data-animation-iteration | Nombre de répétitions | 1 |
| data-animation-direction | Direction | normal |
| data-animation-fill | Mode de remplissage | none |
| data-animation-on-end | Action à la fin | - |Actions de fin d'animation
Via data-animation-on-end : remove : Supprime l'élément du DOM hide : Cache l'élément (display: none) reset : Réinitialise et rejoue l'animation nomFonction : Appelle une fonction JavaScript globale
<!-- Animation simple -->
<div data-animation="fadeIn">
Contenu
</div>
<!-- Animation infinie -->
<div
data-animation="bounce"
data-animation-duration="1s"
data-animation-iteration="infinite">
Rebond continu
</div>
<!-- Animation avec callback -->
<div
data-animation="slideInLeft"
data-animation-on-end="hide">
Disparaît après animation
</div>Créer des animations personnalisées via data-attributes
Animation personnalisée
<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">
Animation personnalisée
</div>Créer des animations personnalisée via JavaScript - Méthode simple
Un simple bouton avec fond et texte
// Définir l'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. Créer une transition simple
animStyles.createTransitionAnimation('myFade',
{ opacity: 0, transform: 'scale(0.8)' },
{ opacity: 1, transform: 'scale(1)' },
4 // 4 étapes
);
// 2. Créer une animation en boucle
animStyles.createLoopAnimation('colorLoop', [
{ backgroundColor: '#FF0000' },
{ backgroundColor: '#00FF00' },
{ backgroundColor: '#0000FF' },
{ backgroundColor: '#FF0000' }
]);
// 3. Créer une animation de respiration
animStyles.createBreathingAnimation('breathe', 1, 1.1, 4);
// 4. Créer un clignotement
animStyles.createBlinkAnimation('blink', '1s', 3);
// 5. Créer une séquence personnalisée
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)' } }
]);API JavaScript : AnimationManager
Enregistre une nouvelle animation : addAnimation(name, keyframes)
marssel.animationManager.addAnimation('customFade', {
'from': { opacity: 0 },
'to': { opacity: 1 }
});API JavaScript : addAnimation()
Enregistre une nouvelle animation : addAnimation(name, keyframes)
marssel.animationManager.addAnimation('customFade', {
'from': { opacity: 0 },
'to': { opacity: 1 }
});API JavaScript : triggerAnimation()
Déclenche une animation sur un élément : 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'
});API JavaScript : registerKeyframes()
Enregistre des keyframes : registerKeyframes(name, keyframes)
marssel.animationManager.animationStyles.registerKeyframes('myAnim', {
'0%': { transform: 'scale(1)' },
'100%': { transform: 'scale(2)' }
});API JavaScript : createTransitionAnimation()
Crée une transition interpolée : createTransitionAnimation(name, fromState, toState, steps)
marssel.animationManager.animationStyles.createTransitionAnimation(
'smoothGrow',
{ width: '100px', height: '100px' },
{ width: '200px', height: '200px' },
5
);API JavaScript : createLoopAnimation()
Crée une animation en boucle : createLoopAnimation(name, states)
marssel.animationManager.animationStyles.createLoopAnimation('rainbow', [
{ color: '#FF0000' },
{ color: '#FF7F00' },
{ color: '#FFFF00' },
{ color: '#00FF00' },
{ color: '#0000FF' },
{ color: '#4B0082' },
{ color: '#9400D3' },
{ color: '#FF0000' }
]);API JavaScript : getAllAnimations()
Récupère la liste de toutes les animations : getAllAnimations()
const animations = marssel.animationManager.animationStyles.getAllAnimations();
console.log('Animations disponibles:', animations);API JavaScript : getStats()
Obtient les statistiques des animations : getStats()
const stats = marssel.animationManager.animationStyles.getStats();
console.log(stats);
// { totalKeyframes: 30, predefinedCount: 27, customCount: 3 }