Toutes les ressources premium et membres pour 8,99 €/mois, en abonnement sans engagement. Voir les offres

PalateKit

Se connecter
Menu

Demander une ressource

Décrivez en une phrase la ressource qui vous manque. Nous vous écrirons quand elle sera publiée.

0 / 280

Une page, une vidéo ou une image en ligne.

Débloquer PalateKit

Tout débloquer

Offre

Le paiement vaut acceptation de nos conditions générales de vente.

Paiement sécurisé par Stripe. Reçus et factures envoyés par e-mail.

Content de vous revoir

Connectez-vous pour installer, télécharger ou sauvegarder cette ressource. Un compte gratuit suffit pour les ressources gratuites.

Animation web fluide à 60 images/s v1.0.0

Utilisez cette ressource pour rendre fluides les animations d'une page web

Nouveau

  • 569 téléchargements
  • 203 mentions J'aime
  • 169 sauvegardes

Gratuit

Installer avec la CLI

Dans un terminal, depuis le dossier voulu :

npx --yes palatekit@latest install smooth-web-animation

Sans 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 login

L'agent remplace les propriétés coûteuses (width, top, box-shadow) par des équivalents qui n'utilisent que le compositeur, applique la technique FLIP pour animer les changements de mise en page et gère height auto. Il vérifie ensuite dans les outils de développement qu'aucun recalcul de mise en page ne survient pendant l'animation.

Choisie surtout par

Mise à jour le 2 novembre 2026

Aucun aperçu : carte dessinée

Caractéristiques

Fonctionne dans
Guides d'installation
Génère avec
Le modèle de votre agent
Licence
MIT

Ressources similaires

Tout voir

Ce que vous obtenez

  • SKILL.md traduit en français : règle de base, ombre, FLIP, height auto, will-change, vérification
  • patterns-and-profiling.md : exemples complets (accordéon, liste, parallaxe) et profilage

Pour qui

  • Un survol ou un défilement qui saccade
  • Animer l'ouverture d'un panneau de hauteur automatique
  • Réordonner des cartes avec une animation fluide

Pas pour qui

  • Créer des animations de marque ou de la vidéo
  • Optimiser autre chose que l'animation

Étiquettes

  • performance
  • animation
  • css
  • flip
  • 60 fps

À propos

Vous dites

« Mon menu déroulant et mes cartes saccadent au survol. Rends les animations fluides à 60 images par seconde. »

Aucun aperçu : carte dessinée

Skill publiée par iart-ai sous licence MIT, traduite par PalateKit.

Voir plus

Prérequis

À préparer
La page ou le composant qui saccade

Comment l'utiliser

  1. Copiez le dossier de la skill dans le dossier de skills de votre agent.
  2. Indiquez la page ou le composant qui saccade.
  3. Contrôlez dans les outils de développement l'absence de Layout et de Paint pendant l'animation.

Aperçu du contenu

Fichiers

  • LICENSE1,1 Ko
  • NOTICE-PALATEKIT.md0,4 Ko
  • README.md0 Ko
  • references/patterns-and-profiling.md4,8 Ko
  • SKILL.md11,7 Ko

Origine et licence

Modifié par PalateKit

Auteur
iart-ai
Source
github.com/iart-ai/web-animation-skills/tree/b6dba3eb759726845a44163ff0bad70dd9e7fbb6/skills/60fps-animation
Licence
MIT

Notice

Version modifiée de « 60fps-animation » (iart-ai, MIT) : traduction française et fiche par PalateKit.

Avis des utilisateurs

–

Aucune note pour l'instant

Chargement des avis…

Supprimer votre avis ?

Votre note et votre commentaire seront retirés de la fiche.

Questions fréquentes

Pourquoi n'animer que transform et opacity ?

Ces deux propriétés sont gérées par le compositeur et évitent de recalculer la mise en page à chaque image.

La skill modifie-t-elle mon design ?

Non, elle garde l'effet visuel et change seulement la façon de l'obtenir.