GratuitVidéo
Fenêtre d'application et zoom
- 365365 téléchargements
- 125125 mentions J'aime
- 188188 sauvegardes
Compatible avec
+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
Sélection PalateKit
Douze transitions CSS pour interfaces web v1.0.0
Utilisez cette ressource pour ajouter des transitions fluides aux éléments d'une interface web
Nouveau
- 301 téléchargements
- 166 mentions J'aime
- 105 sauvegardes
4,49 €
Accès à vie à cette ressource, avec ses mises à jour.
Installer avec la CLI
Dans un terminal, depuis le dossier voulu :
npx --yes palatekit@latest install css-ui-transitionsSans option, la skill va dans ~/.agents/skills/ ; ajoutez --agent claude-code (ou codex, cursor…) pour viser un agent.
Première fois : connectez la CLI avec
npx --yes palatekit@latest loginL'agent choisit la transition qui correspond à l'élément (menu déroulant, fenêtre, badge, chiffre qui change…), ajoute une seule fois le bloc de variables :root, puis colle l'extrait CSS tel quel avec ses classes et, si besoin, son court script d'orchestration. Chaque extrait respecte « prefers-reduced-motion ». Vous obtenez des animations cohérentes, sans bibliothèque à installer.
Mise à jour le 2 novembre 2026
Aperçus
Caractéristiques
- Fonctionne dans
- Guides d'installation
- Génère avec
- Le modèle de votre agent
- Licence
- MIT
Ressources similaires
Tout voir- Gratuit
GratuitVidéo
Un seul grand chiffre
- 463463 téléchargements
- 223223 mentions J'aime
- 100100 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
PROVidéo
PalateKit Motion, la bibliothèque
- 338338 téléchargements
- 198198 mentions J'aime
- 249249 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
PROVidéo
Trois barres face à face
- 348348 téléchargements
- 133133 mentions J'aime
- 182182 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
PROVidéo
Avant / après au curseur
- 322322 téléchargements
- 248248 mentions J'aime
- 238238 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
PROVidéo
Carrousel de trois cartes
- 418418 téléchargements
- 157157 mentions J'aime
- 101101 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
PROVidéo
Échange en bulles
- 564564 téléchargements
- 127127 mentions J'aime
- 161161 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
PROVidéo
Liste qui se coche
- 442442 téléchargements
- 233233 mentions J'aime
- 160160 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
Ce que vous obtenez
- SKILL.md traduit en français : règles de choix, installation et erreurs à éviter
- 12 fiches de transition en anglais : CSS, classes HTML à poser et script quand il en faut un
- _root.css : toutes les durées et courbes d'animation réunies dans un seul bloc
Pour qui
- Soigner les micro-interactions d'une application ou d'un site
- Animer menus, fenêtres et formulaires sans bibliothèque
- Garder des durées cohérentes sur toute une interface
Pas pour qui
- Animations longues de page de vente ou liées au défilement
- Projets qui utilisent déjà une bibliothèque d'animation comme Framer Motion
Étiquettes
- css
- transitions
- micro-interactions
- interface
- accessibilité
À propos
Vous dites
« Fais s'ouvrir le menu du compte en douceur depuis son bouton, et secoue le champ quand le code est faux. »
Skill publiée par jakubantalik sous licence MIT, traduite par PalateKit.
Voir plusVoir moins
Prérequis
- À préparer
- Le projet web à animer
Comment l'utiliser
- Installez la skill dans votre projet
- Demandez à l'agent l'effet voulu sur un élément précis
- Vérifiez le rendu, puis ajustez durées et courbes dans le bloc :root
Aperçu du contenu
Fichiers
- _root.css3 Ko
- 01-card-resize.md1,7 Ko
- 02-number-pop-in.md3,8 Ko
- 03-notification-badge.md4 Ko
- 04-text-states-swap.md3,1 Ko
- 05-menu-dropdown.md3,5 Ko
- 06-modal.md2,8 Ko
- 07-panel-reveal.md2,8 Ko
- 08-page-side-by-side.md3,4 Ko
- 09-icon-swap.md2,4 Ko
- 10-success-check.md7,1 Ko
- 11-avatar-group-hover.md7,4 Ko
- 12-error-state-shake.md8,5 Ko
- LICENSE1 Ko
- NOTICE-PALATEKIT.md0,5 Ko
- SKILL.md13,1 Ko
Origine et licence
Modifié par PalateKit
- Auteur
- jakubantalik
- Source
- github.com/jakubantalik/transitions-dev/tree/038b0bdc75375c2beed51d1e824c98cdc7b86f8c/skills/transitions-dev
- Licence
- MIT
Notice
Version modifiée de « transitions-dev » (jakubantalik, MIT) : traduction française et fiche par PalateKit.
Avis des utilisateurs
–
Aucune note pour l'instant
Chargement des avis…
Questions fréquentes
Faut-il installer une bibliothèque ?
Non. Les transitions sont en CSS, avec un court script JavaScript pour celles qui changent d'état (menu, fenêtre, validation…).
Comment changer la vitesse d'une animation ?
Modifiez sa variable dans le bloc :root, par exemple --modal-open-dur : tous les extraits lisent ces valeurs.