HTML / CSS / JavaScript

Animation et micro-interactions

Chargement, progression, transitions d’état et retours de détail.

64catégorie de cas
Afficher actuellement 64 cas
0004Animation et micro-interactions

Basculement d’onglets

Composant d’onglets avec navigation par touches fléchées et animation de changement de contenu.

HTMLCSSJavaScriptTabs
Ouvrir et exécuter
0009Animation et micro-interactions

Animation de chargement créative

Effet visuel de pulsation de rail et de progression de chargement réalisé entièrement avec CSS.

HTMLCSSAnimationLoading
Ouvrir et exécuter
0012Animation et micro-interactions

Animation du taiji tournant

Un motif yin-yang dessiné et animé uniquement à partir de formes CSS.

HTMLCSSAnimationTaiji
Ouvrir et exécuter
0032Animation et micro-interactions

Chargeur multi-étapes pour le téléversement de fichiers

Réalisez un chargeur en plusieurs étapes dans un scénario de téléversement de fichiers : avec du contenu réel, des contrôles utilisables, un retour d’état clair et une mise en page adaptée à toutes les tailles d’écran.

Animation et micro-interactionschargeur multi-étapesHTMLCSS AnimationJavaScript
Ouvrir et exécuter
0048Animation et micro-interactions

Transition de forme du bouton de téléversement de fichier

Transition de morphing du bouton dans un scénario de téléversement de fichier : comprend du contenu réel, des contrôles interactifs, un retour d’état clair et une mise en page adaptable à différentes tailles.

Animation et micro-interactionsTransformation de boutonHTMLCSS AnimationJavaScript
Ouvrir et exécuter
0064Animation et micro-interactions

Retour de progression circulaire pour l’envoi de fichiers

Dans un contexte de téléversement de fichier, réalisez un retour de progression circulaire : contenu réel, contrôles actionnables, retours d’état clairs et mise en page adaptée à toutes les tailles.

Animation et micro-interactionsretour de progression circulaireHTMLCSS AnimationJavaScript
Ouvrir et exécuter
0080Animation et micro-interactions

Transition de l’écran squelette pour le téléversement de fichiers

Transition de squelette dans le contexte du téléversement de fichiers : inclut du contenu réel, des contrôles utilisables, un retour d’état clair et une mise en page adaptative à différentes tailles.

Animation et micro-interactionsTransition squeletteHTMLCSS AnimationJavaScript
Ouvrir et exécuter
0096Animation et micro-interactions

Entrée décalée de la liste de fichiers importés

Réaliser une entrée échelonnée de liste dans un scénario de téléversement de fichier : contenir du contenu réel, des contrôles manipulables, un retour d’état clair et une mise en page adaptable à différentes tailles.

Animation et micro-interactionsEntrée échelonnée de la listeHTMLCSS AnimationJavaScript
Ouvrir et exécuter
0112Animation et micro-interactions

Transition de page pour le changement d’état du téléversement de fichier

Effectuez une transition de changement de page dans un contexte de téléversement de fichier : avec du contenu réel, des contrôles interactifs, un retour d’état clair et une mise en page adaptée à différentes tailles.

Animation et micro-interactionsTransition de changement d’état par retournementHTMLCSS AnimationJavaScript
Ouvrir et exécuter
0128Animation et micro-interactions

Retour du contrôle élastique pour le téléversement de fichiers

Dans un contexte de téléversement de fichiers, réaliser un retour élastique des contrôles : contenu réel, contrôles actionnables, retour d’état clair et disposition adaptée à toutes les tailles.

Animation et micro-interactionsRetour des composants élastiquesHTMLCSS AnimationJavaScript
Ouvrir et exécuter
0144Animation et micro-interactions

Feedback de la fenêtre contextuelle de téléchargement de fichier

Dans le scénario de l’envoi de fichiers, réalisez un retour sous forme de notification contextuelle : avec du contenu réel, des contrôles interactifs, un retour d’état clair et une mise en page adaptée à toutes les tailles.

Animation et micro-interactionsRetour de notification contextuelleHTMLCSSJavaScript
Ouvrir et exécuter
0160Animation et micro-interactions

Animation de révélation du contenu lors du téléversement de fichiers

Animation de révélation de contenu dans un scénario de téléversement de fichier : comprend du contenu réel, des contrôles actionnables, un retour d’état clair et une mise en page adaptable à différentes tailles.

Animation et micro-interactionsAnimation de révélation du contenuHTMLCSS AnimationJavaScript
Ouvrir et exécuter
0176Animation et micro-interactions

Animation d’état de trajectoire pour le téléversement de fichiers

Dans un contexte de téléversement de fichiers, complétez une animation d’état orbitale : contenu réel, contrôles actionnables, retours d’état clairs et mise en page adaptative à différentes tailles.

Animation et micro-interactionsAnimation de l’état orbitalHTMLCSS AnimationJavaScript
Ouvrir et exécuter
0192Animation et micro-interactions

Chargeur multi-étapes de l’outil de concentration

Complétez un chargeur multi-étapes dans le contexte d’un outil de concentration : il comprend un contenu réel, des contrôles actionnables, un retour d’état clair et une mise en page adaptée à différentes tailles.

Animation et micro-interactionschargeur multi-étapesHTMLCSS AnimationJavaScript
Ouvrir et exécuter
0208Animation et micro-interactions

Transition morphologique du bouton de l’outil de concentration

Dans le scénario de l’outil de concentration, réalisez la transition de forme du bouton : contenu authentique, contrôles interactifs, retours d’état clairs et mise en page adaptative à différentes tailles.

Animation et micro-interactionsTransformation de boutonHTMLCSS AnimationJavaScript
Ouvrir et exécuter
0224Animation et micro-interactions

Retour de progression circulaire pour outil de concentration

Dans le contexte d’un outil de concentration, complétez un retour de progression circulaire : contenu réel, contrôles actionnables, retours d’état clairs et mise en page adaptative à plusieurs tailles.

Animation et micro-interactionsretour de progression circulaireHTMLCSS AnimationJavaScript
Ouvrir et exécuter
0240Animation et micro-interactions

Transition d’écran squelette de l’outil de concentration

Dans le scénario d’outil de concentration, réaliser une transition d’écran squelette : contenu réel, contrôles actionnables, retour d’état clair et mise en page adaptable à différentes tailles.

Animation et micro-interactionsTransition squeletteHTMLCSS AnimationJavaScript
Ouvrir et exécuter
0256Animation et micro-interactions

Liste d’outils de concentration, entrée échelonnée

Réalisez une entrée décalée de la liste dans un contexte d’outil de concentration : contenu réel, contrôles utilisables, retour d’état clair et mise en page adaptée à différentes tailles.

Animation et micro-interactionsEntrée échelonnée de la listeHTMLCSS AnimationJavaScript
Ouvrir et exécuter
0272Animation et micro-interactions

Changement d’état de la page de l’outil de concentration

Dans le scénario de l’outil de concentration, réaliser une transition d’état de changement de page : inclut du contenu réel, des contrôles utilisables, un retour d’état clair et une mise en page adaptée à toutes les tailles.

Animation et micro-interactionsTransition de changement d’état par retournementHTMLCSS AnimationJavaScript
Ouvrir et exécuter
0288Animation et micro-interactions

Retour élastique du contrôle de focus de l’outil de concentration

Dans un contexte d’outil de concentration, réaliser un retour souple des contrôles : inclure du contenu réel, des contrôles actionnables, des retours d’état clairs et une mise en page adaptée à différentes tailles.

Animation et micro-interactionsRetour des composants élastiquesHTMLCSS AnimationJavaScript
Ouvrir et exécuter
0304Animation et micro-interactions

Retour pop-up de notification de l’outil de focus

Dans un contexte d’outil de concentration, créer une pop-up de notification avec du contenu réel, des contrôles actionnables, un retour d’état clair et une mise en page adaptée à plusieurs tailles.

Animation et micro-interactionsRetour de notification contextuelleHTMLCSSJavaScript
Ouvrir et exécuter
0320Animation et micro-interactions

Animation de révélation du contenu de l’outil de concentration

Dans le scénario de l’outil de concentration, finalisez une animation de révélation du contenu : elle inclut du contenu réel, des contrôles exploitables, un retour d’état clair et une mise en page adaptative selon les tailles d’écran.

Animation et micro-interactionsAnimation de révélation du contenuHTMLCSS AnimationJavaScript
Ouvrir et exécuter
0336Animation et micro-interactions

Animation de l’état de la trajectoire de l’outil de concentration

Dans un contexte d’outil de concentration, réalisez une animation d’état orbitale : contenu réel, contrôles interactifs, retour d’état clair et mise en page adaptable à différentes tailles.

Animation et micro-interactionsAnimation de l’état orbitalHTMLCSS AnimationJavaScript
Ouvrir et exécuter
0352Animation et micro-interactions

Chargeur à plusieurs étapes pour lecteur de musique

Créez un chargeur à plusieurs étapes dans un contexte de lecteur de musique : contenu réel, contrôles actionnables, retours d’état clairs et mise en page adaptée à différentes tailles.

Animation et micro-interactionschargeur multi-étapesHTMLCSS AnimationJavaScript
Ouvrir et exécuter
0367Animation et micro-interactions

Transition de forme des boutons du lecteur de musique

Dans un contexte de lecteur de musique, réalisez la transition de forme du bouton : elle comprend du contenu réaliste, des contrôles actionnables, un retour d’état clair et une mise en page adaptée à différentes tailles.

Animation et micro-interactionsTransformation de boutonHTMLCSS AnimationJavaScript
Ouvrir et exécuter
0382Animation et micro-interactions

Retour de progression circulaire du lecteur de musique

Réaliser un retour de progression circulaire dans un contexte de lecteur de musique : inclure un contenu réel, des contrôles actionnables, un retour d’état clair et une mise en page multi-tailles.

Animation et micro-interactionsretour de progression circulaireHTMLCSS AnimationJavaScript
Ouvrir et exécuter
0397Animation et micro-interactions

transition d’écran squelette du lecteur de musique

Effectuez la transition de l’écran squelette dans un lecteur de musique : contenu réel, commandes interactives, retours d’état clairs et mises en page adaptatives à toutes les tailles.

Animation et micro-interactionsTransition squeletteHTMLCSS AnimationJavaScript
Ouvrir et exécuter
0411Animation et micro-interactions

Entrée décalée de la liste du lecteur de musique

Dans le contexte d’un lecteur de musique, réaliser une entrée décalée de la liste : elle comprend du contenu réel, des contrôles actionnables, des retours d’état clairs et une mise en page adaptée à plusieurs tailles.

Animation et micro-interactionsEntrée échelonnée de la listeHTMLCSS AnimationJavaScript
Ouvrir et exécuter
0424Animation et micro-interactions

Changement d’état de tournement de page du lecteur de musique

Réalisez la transition de changement de page dans un scénario de lecteur de musique : contenu réel, contrôles interactifs, retour d’état clair et mise en page adaptable à différentes tailles.

Animation et micro-interactionsTransition de changement d’état par retournementHTMLCSS AnimationJavaScript
Ouvrir et exécuter
0437Animation et micro-interactions

Retour élastique des commandes du lecteur de musique

Dans un contexte de lecteur de musique, réalisez un retour élastique des contrôles : avec du contenu réel, des contrôles utilisables, un retour d’état clair et une mise en page adaptée à différentes tailles.

Animation et micro-interactionsRetour des composants élastiquesHTMLCSS AnimationJavaScript
Ouvrir et exécuter
0450Animation et micro-interactions

fenêtre contextuelle de notification du lecteur de musique

Réalisez un retour de notification pop-up dans un contexte de lecteur de musique : il comprend du contenu réel, des contrôles utilisables, un retour d’état clair et une mise en page adaptée à différentes tailles.

Animation et micro-interactionsRetour de notification contextuelleHTMLCSSJavaScript
Ouvrir et exécuter
0461Animation et micro-interactions

Animation de dévoilement du contenu du lecteur de musique

Complétez une animation de révélation de contenu dans le contexte d’un lecteur musical : elle comprend un contenu réel, des contrôles actionnables, un retour d’état clair et une mise en page adaptée à différentes tailles.

Animation et micro-interactionsAnimation de révélation du contenuHTMLCSS AnimationJavaScript
Ouvrir et exécuter
0471Animation et micro-interactions

Animation de l’état du parcours du lecteur de musique

Réalisez une animation de l’état des pistes dans le scénario d’un lecteur de musique : elle comprend du contenu réel, des contrôles actionnables, un retour d’état clair et une mise en page adaptable à différentes tailles.

Animation et micro-interactionsAnimation de l’état orbitalHTMLCSS AnimationJavaScript
Ouvrir et exécuter
0479Animation et micro-interactions

Chargeur multi-étapes du statut de commande

Réalisez un chargeur à plusieurs étapes pour un scénario de statut de commande : inclut du contenu réel, des contrôles actionnables, un retour d’état clair et une mise en page adaptée à différentes tailles.

Animation et micro-interactionschargeur multi-étapesHTMLCSS AnimationJavaScript
Ouvrir et exécuter
0487Animation et micro-interactions

Transition de forme du bouton d’état de commande

Transition de forme d’un bouton dans le contexte du statut de commande : contenu réaliste, contrôles utilisables, retour d’état clair et mise en page multi-tailles.

Animation et micro-interactionsTransformation de boutonHTMLCSS AnimationJavaScript
Ouvrir et exécuter
0493Animation et micro-interactions

Retour de progression circulaire de l’état de commande

Créez un retour de progression circulaire dans un scénario de statut de commande : contenu réel, contrôles exploitables, retours d’état clairs et mise en page adaptative à différentes tailles.

Animation et micro-interactionsretour de progression circulaireHTMLCSS AnimationJavaScript
Ouvrir et exécuter
0498Animation et micro-interactions

Transition du squelette de l’état de commande

Complétez la transition de l’écran squelette dans le scénario d’état de commande : incluez du contenu réel, des contrôles interactifs, un retour d’état clair et une mise en page adaptée à différentes tailles.

Animation et micro-interactionsTransition squeletteHTMLCSS AnimationJavaScript
Ouvrir et exécuter
0502Animation et micro-interactions

Entrée échelonnée de la liste des statuts de commande

Réalisation d’une entrée échelonnée de liste dans un contexte de statut de commande : contenu réel, contrôles interactifs, retours d’état clairs et mise en page adaptée à différentes tailles.

Animation et micro-interactionsEntrée échelonnée de la listeHTMLCSS AnimationJavaScript
Ouvrir et exécuter
0506Animation et micro-interactions

Changement d’état par pagination du statut de commande

Dans le contexte de l’état de commande, effectuez une transition d’état par retournement de page : cela inclut du contenu réel, des contrôles actionnables, un retour d’état clair et une mise en page adaptée à différentes tailles.

Animation et micro-interactionsTransition de changement d’état par retournementHTMLCSS AnimationJavaScript
Ouvrir et exécuter
0510Animation et micro-interactions

Retour élastique de l’état de la commande

Dans un scénario d’état de commande, réalisez un retour d’interface élastique : il doit inclure du contenu réel, des contrôles actionnables, un retour d’état clair et une disposition adaptée à toutes les tailles.

Animation et micro-interactionsRetour des composants élastiquesHTMLCSS AnimationJavaScript
Ouvrir et exécuter
0514Animation et micro-interactions

Notification contextuelle d’état de commande

Finalisez un retour par notification contextuelle dans un contexte d’état de commande : contenu réel, contrôles actionnables, retours d’état clairs et disposition adaptative à plusieurs tailles.

Animation et micro-interactionsRetour de notification contextuelleHTMLCSSJavaScript
Ouvrir et exécuter
0516Animation et micro-interactions

Animation de révélation du contenu du statut de commande

Réalisez une animation de révélation de contenu dans un scénario d’état de commande : elle comprend du contenu réel, des contrôles interactifs, un retour d’état clair et une mise en page adaptative multi-tailles.

Animation et micro-interactionsAnimation de révélation du contenuHTMLCSS AnimationJavaScript
Ouvrir et exécuter
0518Animation et micro-interactions

Animation orbitale de l’état de commande

Réalisez une animation d’état orbital dans le contexte du statut de commande : contenu réel, contrôles actionnables, retour d’état clair et mise en page adaptable à toutes les tailles.

Animation et micro-interactionsAnimation de l’état orbitalHTMLCSS AnimationJavaScript
Ouvrir et exécuter
0533Animation et micro-interactions

Transition de morphing du bouton de synchronisation d’archives

Dans le scénario de synchronisation d’archives, réaliser une transition de forme du bouton : contenu réel, contrôles actionnables, retour d’état clair et mise en page adaptable à différentes tailles.

Animation et micro-interactionsTransformation de boutonHTMLCSS AnimationJavaScript
Ouvrir et exécuter
0558Animation et micro-interactions

Chargeur multi-étapes à bande sonore

Réalisez un chargeur à plusieurs étapes pour un contexte de bande sonore : il contient du contenu réaliste, des contrôles actionnables, des retours d’état clairs et une mise en page adaptée à différentes tailles.

Animation et micro-interactionschargeur multi-étapesHTMLCSS AnimationJavaScript
Ouvrir et exécuter
0583Animation et micro-interactions

Mise à jour du catalogue et de la pagination des alertes

Effectuez une transition de page dans un scénario de rappel de catalogue : contenu réel, contrôles actionnables, retour d’état clair et mise en page adaptable à différentes tailles.

Animation et micro-interactionsTransition de changement d’état par retournementHTMLCSS AnimationJavaScript
Ouvrir et exécuter
0608Animation et micro-interactions

Notification contextuelle de l’enregistrement du catalogue

Dans un contexte d’enregistrement de catalogue, terminez le retour visuel de notification contextuelle : il comprend un contenu réaliste, des contrôles utilisables, un retour d’état clair et une mise en page adaptée à toutes les tailles.

Animation et micro-interactionsRetour de notification contextuelleHTMLCSSJavaScript
Ouvrir et exécuter
0633Animation et micro-interactions

Animation de statut orbitale pour catalogue en boucle

Réalisez une animation d’état orbitale dans un décor de boucle de catalogage : avec du contenu réel, des contrôles utilisables, un retour d’état clair et une mise en page adaptée à toutes les tailles d’écran.

Animation et micro-interactionsAnimation de l’état orbitalHTMLCSS AnimationJavaScript
Ouvrir et exécuter
0658Animation et micro-interactions

Pulse circulaire de progression du catalogue

Feedback de progression circulaire pour un scénario de catalogue à impulsion : contenu réel, contrôles actionnables, retour d’état clair et mise en page adaptable à toutes les tailles.

Animation et micro-interactionsretour de progression circulaireHTMLCSS AnimationJavaScript
Ouvrir et exécuter
0683Animation et micro-interactions

Animation de révélation du contenu des signaux du catalogue

Animer la révélation de contenu dans un scénario de signal de catalogue : inclure du contenu réel, des contrôles actionnables, un retour d’état clair et une mise en page adaptée à différentes tailles.

Animation et micro-interactionsAnimation de révélation du contenuHTMLCSS AnimationJavaScript
Ouvrir et exécuter
0708Animation et micro-interactions

Transition de squelette de synchronisation du catalogage

Terminez la transition d’écran squelettique dans le contexte d’une synchronisation du catalogage : il comprend du contenu réel, des contrôles actionnables, un retour d’état clair et une mise en page adaptée à plusieurs tailles.

Animation et micro-interactionsTransition squeletteHTMLCSS AnimationJavaScript
Ouvrir et exécuter
0733Animation et micro-interactions

Retour élastique du contrôleur de suivi du catalogue

Dans un scénario de suivi d’inventaire, finalisez un retour souple des contrôles : contenu réel, contrôles actionnables, retour d’état clair et mise en page adaptée à différentes tailles.

Animation et micro-interactionsRetour des composants élastiquesHTMLCSS AnimationJavaScript
Ouvrir et exécuter
0758Animation et micro-interactions

Liste des déclencheurs de catalogage pour une entrée échelonnée

Dans le scénario du déclencheur de catalogue, réalisez une entrée échelonnée de la liste : avec du contenu réel, des contrôles interactifs, un retour d’état clair et une mise en page adaptée à plusieurs tailles d’écran.

Animation et micro-interactionsEntrée échelonnée de la listeHTMLCSS AnimationJavaScript
Ouvrir et exécuter
0783Animation et micro-interactions

Transition de forme du bouton pour la progression du cours

Accomplir une transition de morphing de bouton dans un scénario de progression de cours : contenu réaliste, contrôles actionnables, retours d’état clairs et mise en page adaptée à différentes tailles.

Animation et micro-interactionsTransformation de boutonHTMLCSS AnimationJavaScript
Ouvrir et exécuter
0808Animation et micro-interactions

Chargeur multistade de rappel pour la consultation ambulatoire

Dans le contexte d’un rappel en cabinet, réaliser un indicateur de chargement à plusieurs étapes : avec du contenu authentique, des contrôles actionnables, un retour d’état clair et une mise en page adaptée à différentes tailles.

Animation et micro-interactionschargeur multi-étapesHTMLCSS AnimationJavaScript
Ouvrir et exécuter
0833Animation et micro-interactions

Transition de retournement pour l’enregistrement en consultation

Réalisez une transition d’état de type page tournée dans le scénario d’enregistrement en clinique : elle comprend du contenu réel, des contrôles utilisables, un retour d’état clair et une mise en page adaptative selon la taille de l’écran.

Animation et micro-interactionsTransition de changement d’état par retournementHTMLCSS AnimationJavaScript
Ouvrir et exécuter
0858Animation et micro-interactions

Notification cyclique de consultation externe avec pop-up de retour

Assurez un retour de notification contextuel dans un scénario de circuit de consultation : contenu réaliste, contrôles actionnables, retour d’état clair et mise en page adaptée à toutes les tailles.

Animation et micro-interactionsRetour de notification contextuelleHTMLCSSJavaScript
Ouvrir et exécuter
0883Animation et micro-interactions

Animation d’état en orbite à impulsions de clinique externe

Dans le contexte d’une pulsation en consultation, achevez une animation d’état orbital : elle comprend du contenu réel, des contrôles utilisables, un retour d’état clair et une mise en page adaptée à différentes tailles.

Animation et micro-interactionsAnimation de l’état orbitalHTMLCSS AnimationJavaScript
Ouvrir et exécuter
0908Animation et micro-interactions

Retour visuel en anneau de progression pour le signal du service ambulatoire

Réaliser un retour de progression circulaire dans un contexte de signalisation de clinique : contenu réel, contrôles interactifs, retour d’état clair et mise en page adaptative à différentes tailles.

Animation et micro-interactionsretour de progression circulaireHTMLCSS AnimationJavaScript
Ouvrir et exécuter
0933Animation et micro-interactions

Animation de révélation du contenu de l’étape clinique

Réaliser une animation de révélation de contenu dans un contexte de phase ambulatoire : inclut du contenu réel, des contrôles actionnables, un retour d’état clair et une mise en page adaptable à différentes tailles.

Animation et micro-interactionsAnimation de révélation du contenuHTMLCSS AnimationJavaScript
Ouvrir et exécuter
0958Animation et micro-interactions

Transition d’écran squelette pour la synchronisation ambulatoire

Complétez une transition de squelette dans un contexte de synchronisation en cabinet : contenu réel, contrôles actionnables, retours d’état clairs et mise en page adaptative à différentes tailles.

Animation et micro-interactionsTransition squeletteHTMLCSS AnimationJavaScript
Ouvrir et exécuter
0983Animation et micro-interactions

Retour souple du contrôleur de suivi ambulatoire

Dans le scénario du suivi en consultation, créez un retour de contrôle élastique : contenu réel, contrôles interactifs, retour d’état clair et mise en page adaptative à toutes les tailles.

Animation et micro-interactionsRetour des composants élastiquesHTMLCSS AnimationJavaScript
Ouvrir et exécuter
1008Animation et micro-interactions

Liste des déclencheurs de consultation externe avec entrée échelonnée

Dans le contexte du déclencheur de service ambulatoire, réaliser une entrée échelonnée dans une liste : avec du contenu réel, des contrôles actionnables, un retour d’état clair et une mise en page adaptable à différentes tailles.

Animation et micro-interactionsEntrée échelonnée de la listeHTMLCSS AnimationJavaScript
Ouvrir et exécuter
1033Animation et micro-interactions

Morphing du bouton pour le parcours de don

Dans un scénario de processus de don, réalisez une transition de forme du bouton : contenu réel, contrôles interactifs, retours d’état clairs et disposition adaptée à plusieurs tailles.

Animation et micro-interactionsTransformation de boutonHTMLCSS AnimationJavaScript
Ouvrir et exécuter