Idéal pour
- Partir d'un prompt structuré et réutilisable plutôt que d'une conversation vierge.
- Adapter le prompt à vos propres données tout en conservant l'intention d'origine.
- Les workflows liés à Software Development, Design & Art.
Générateur de keyframes d’animation CSS
Remplir ce promptGénérez des animations CSS keyframes personnalisées pour les éléments d’interface.
Modèle de prompt
Create CSS `@keyframes` and the corresponding utility class for a {{Animation Style: Fade, Slide, Bounce, Spin, Pulse}} animation. The animation should have a duration of {{Duration in Seconds:1-10}} seconds, run {{Iteration Count: Infinite, 1, 2, 3}} times, and use a {{Timing Function: ease-in-out, linear, ease-in, cubic-bezier}}. Provide the code for animating a {{Element: e.g. Puco UI call-to-action button}}.
Guide du prompt
Comment l'utiliser
- Copiez le modèle de prompt complet.
- Remplacez chaque variable par votre propre contexte ou choisissez l'une des options suggérées.
- Collez le prompt complété dans ChatGPT, Claude, Gemini ou un autre assistant IA.
Variables de ce prompt
Animation Style
Fade, Slide, Bounce, Spin, Pulse
Duration in Seconds
1-10
Iteration Count
Infinite, 1, 2, 3
Timing Function
ease-in-out, linear, ease-in, cubic-bezier
Element
e.g. Puco UI call-to-action button
Exemple de départ
Create CSS `@keyframes` and the corresponding utility class for a Fade animation. The animation should have a duration of 1-10 seconds, run Infinite times, and use a ease-in-out. Provide the code for animating a e.g. Puco UI call-to-action button.
Comment fonctionnent les variables
Syntaxe des variables
Les variables sont entourées de {{ et }} et suivent ce modèle :
{{variable name: option1, option2, option3 }}
Variables prédéfinies
Une sélection peut référencer une liste de variables prédéfinie à l'aide de crochets. Elles apparaissent en [orange] et fournissent des valeurs courantes comme des couleurs, des tons ou des langues.
{{Tone: [tones] }}
Listes de choix personnalisées
Vous pouvez aussi fournir une liste de choix en ligne, séparés par des virgules.
{{Format: bullet points, paragraphs, numbered list }}
Astuce : vous n'avez pas besoin de l'application PUCO pour utiliser ces prompts ! Copiez simplement le modèle et remplacez chaque section {{…}} par votre propre texte directement dans ChatGPT, Claude, Gemini ou tout autre assistant IA.