Avez-vous remarqué à quel point les applications Tinkoff, Yandex ou Alfa-Bank sont agréables à utiliser ? Les boutons répondent aux pressions, les éléments apparaissent en douceur, les chargements ne sont pas énervants, mais au contraire, ils sont agréables à l'œil. Ce n'est pas de la magie et ce n'est pas une armée de designers. C'est un ensemble de techniques spécifiques que vous pouvez maîtriser.
Pourquoi est-ce important ?
L'utilisateur ne dira pas : « Wow, il y a une transition avec cubic-bezier ! ». Mais il dira : « Quelle belle application » ou « Ça a l'air un peu bon marché ». Les animations de haute qualité fonctionnent à un niveau subconscient :
Créent une sensation de vitesse — même si le serveur est lent
Donnent un retour d'information — l'utilisateur comprend que son action a été prise en compte
Réduire la charge cognitive - les transitions en douceur aident le cerveau à comprendre ce qui se passe
Inspire confiance — les détails montrent que l'équipe se soucie du produit
1. Des squelettes au lieu de spinners
Quel est le problème avec les spinners ?
Le cercle tournant ne donne aucune information. L'utilisateur ne sait pas combien de temps attendre et ce qui est en cours de chargement.
Ce qu'ils font chez Tinkoff :
Ils montrent le « fantôme » du contenu futur : des blocs gris à la place du texte, des images, des boutons. C'est ce qu'on appelle skeleton screen ou squelette.
.skeleton {
background: linear-gradient(
90deg,
#f0f0f0 25%,
#e0e0e0 50%,
#f0f0f0 75%
);
background-size: 200% 100%;
animation: loading 1.5s infinite;
border-radius: 4px;
}
@keyframes loading {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}Pourquoi cela fonctionne :
Le cerveau perçoit le squelette comme « le contenu est presque chargé », et non « vous devrez attendre un temps indéterminé ». Selon les recherches, les utilisateurs estiment que le temps de chargement avec les squelettes est de 30 à 40 % plus rapide qu'avec les spinners.
2. Réponse tactile aux actions
Effet de pression sur le bouton :
Lorsque vous appuyez sur un bouton dans l'application Yandex, il « tombe » légèrement. Cela imite un bouton physique.
.button {
background: #ffdd2d;
border: none;
padding: 12px 24px;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}
.button:active {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}Effet d'entraînement (vague) :
Lorsque vous cliquez sur le point de pression, l'onde diverge. C'est une fonctionnalité de Material Design, mais tout le monde l'utilise.
function createRipple(event) {
const button = event.currentTarget;
const circle = document.createElement('span');
const diameter = Math.max(button.clientWidth, button.clientHeight);
const radius = diameter / 2;
circle.style.width = circle.style.height = `${diameter}px`;
circle.style.left = `${event.clientX - button.offsetLeft - radius}px`;
circle.style.top = `${event.clientY - button.offsetTop - radius}px`;
circle.classList.add('ripple');
const ripple = button.getElementsByClassName('ripple')[0];
if (ripple) {
ripple.remove();
}
button.appendChild(circle);
}3. Transitions intelligentes entre les états
Mauvais :
Le contenu disparaît et apparaît. Brusquement. À moindre coût.
Bien :
Nous utilisons des transitions en douceur avec transform et opacity.
.fade-enter {
opacity: 0;
transform: translateY(10px);
}
.fade-enter-active {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.fade-enter-to {
opacity: 1;
transform: translateY(0);
}Règle d'or : Toute modification du DOM doit être animée. Pas d'apparitions/disparitions soudaines.
4. Micro-animations de formes
En mettant l'accent sur l'entrée :
.input {
border: 2px solid #e0e0e0;
padding: 12px;
width: 100%;
transition: all 0.2s ease;
outline: none;
}
.input:focus {
border-color: #ffdd2d;
box-shadow: 0 0 0 4px rgba(255, 221, 45, 0.1);
}
.input-label {
position: absolute;
left: 12px;
top: 12px;
color: #999;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
}
.input:focus + .input-label,
.input:not(:placeholder-shown) + .input-label {
top: -8px;
left: 8px;
font-size: 12px;
background: white;
padding: 0 4px;
color: #ffdd2d;
}Validation avec animation :
.input-error {
border-color: #ff3333;
animation: shake 0.4s;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
20%, 40%, 60%, 80% { transform: translateX(5px); }
}5. Les barres de progression qui ne vous énervent pas
Mauvaise barre de progression : se déplace simplement. Ennuyeux.
Une bonne barre de progression : fluide, avec une légère lueur, montre des étapes spécifiques.
.progress-bar {
width: 100%;
height: 6px;
background: #f0f0f0;
border-radius: 10px;
overflow: hidden;
position: relative;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #ffdd2d, #ffc700);
border-radius: 10px;
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
box-shadow: 0 0 10px rgba(255, 221, 45, 0.5);
}6. Fenêtres modales avec apparition intelligente
Incorrect : la fenêtre apparaît simplement.
Correct : l'arrière-plan s'assombrit, la fenêtre apparaît avec un léger effet de zoom et un mouvement de bas en haut.
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0);
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s ease;
pointer-events: none;
}
.modal-overlay.active {
background: rgba(0, 0, 0, 0.5);
pointer-events: all;
}
.modal {
background: white;
border-radius: 16px;
padding: 24px;
max-width: 500px;
width: 90%;
transform: scale(0.9) translateY(20px);
opacity: 0;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.modal-overlay.active .modal {
transform: scale(1) translateY(0);
opacity: 1;
}
7. Cartes avec effets de survol
Cartes de produits, publications, projets — ils doivent répondre au survol :
.card {
background: white;
border-radius: 12px;
padding: 20px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}
.card img {
transition: transform 0.3s ease;
}
.card:hover img {
transform: scale(1.05);
}8. Indicateurs de charge pour les actions
Lorsque l'utilisateur clique sur « Envoyer », le bouton doit indiquer que le processus est en cours :
.submit-button {
position: relative;
min-width: 120px;
transition: all 0.3s ease;
}
.submit-button.loading {
pointer-events: none;
}
.spinner {
width: 20px;
height: 20px;
animation: rotate 1s linear infinite;
}
@keyframes rotate {
100% { transform: rotate(360deg); }
}9. Toasts et notifications
Principes :
Apparaissent sur le côté (en haut à droite ou à gauche)
Entrée en douceur
Disparaissent automatiquement après 3-5 secondes
Peut être fermé manuellement
.toast {
position: fixed;
top: 20px;
right: -300px;
background: white;
padding: 16px 20px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
min-width: 250px;
transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.toast.show {
right: 20px;
}10. Principes importants des animations
Timing functions (fonctions de temps) :
N'utilisez pas simplement ease ou linear. Étudiez cubic-bezier :
ease-in-out - accélère et ralentit en douceur
cubic-bezier(0.4, 0, 0.2, 1) — Material Design easing, très agréable
cubic-bezier(0.25, 0.46, 0.45, 0.94) — easeOutQuad pour des animations rapides
Durée :
Micro-interactions (survol, clics) : 100-200 ms
Transitions entre les états: 200-300ms
Fenêtres modales, tiroirs: 300-400ms
Animations de pages: 400-600ms
Plus de 600 ms, c'est déjà trop lent.
Règle des 60 FPS :
Animez uniquement les propriétés qui ne provoquent pas de reflow :
✅
transform,opacity❌
width,height,top,left,margin
Conclusion
Les animations de qualité ne sont pas une question de complexité, mais de détails. Vous n'avez pas besoin d'apprendre la 3D ou la physique. Il vous suffit de :
Ajouter de la fluidité à tout
Donner un retour d'information sur les actions
Utiliser les bonnes fonctions de timing
Être cohérent
Commencez par un bouton. Rendez-le agréable. Ensuite, un autre. Ensuite, les formulaires. Ensuite, les cartes. Dans un mois, votre application vaudra un million.
Tout cela et bien plus encore peut être étudié dans Codique - en détail, avec des exercices pratiques et des exemples réels. Nous analysons non seulement la théorie, mais nous montrons également comment tout cela fonctionne dans des projets réels.
Et si vous avez besoin d'aide, si vous avez des questions ou si vous souhaitez discuter du code, nous avons une énorme communauté active dans Chaîne Telegram! Plus de 2000 développeurs qui vous aideront, vous conseilleront et vous soutiendront toujours.