1
Transitions CSS
Capture l'etat calcule des transitions CSS, detectant les changements de duree, fonction de timing et proprietes ciblees.
15 cas de test
Animations
Les animations et transitions donnent vie aux interfaces, mais elles introduisent aussi de l'instabilite visuelle. Delta-QA fige les transitions a leur etat calcule et capture les valeurs de transform pour detecter tout changement de comportement.
Ce que nous detectons
2
Animations keyframe
Fige les @keyframes a leur image courante pour comparer les etats d'animation entre versions.
3
Etats hover & interactifs
Capture les instantanes visuels des etats :hover, :active et autres etats interactifs pour comparaison.
4
Transform & origine
Detecte les changements de valeurs translate, rotate, scale, skew et les modifications de transform-origin.
Exemple interactif
Voyez exactement ce que Delta-QA détecte. Comparez les deux versions côte à côte.
Avant
Apres
Scénarios concrets
🎯
La transition qui devient instantanée
Un développeur refactorise les styles et supprime accidentellement la transition de 300ms sur le menu déroulant. Sans transition, le menu pousse le contenu en dessous d'un coup au lieu de le faire glisser progressivement — la page « saute » visuellement. Conséquence visible : les éléments sous le menu se retrouvent décalés plus bas que dans la version de référence, car le navigateur n'a plus le temps de recalculer le layout en douceur. C'est un refactoring CSS, personne n'a pensé à retester les interactions visuelles. Delta-QA compare les captures d'écran du menu ouvert et détecte les décalages de contenu sous le menu — la mise en page différente ressort dans le diff.
⚠️
Le loader qui change de style
Un développeur copie-colle les styles d'un loader depuis un autre projet pour « harmoniser » les composants. Le nouveau loader est visuellement différent : plus grand, avec une couleur d'accent qui ne correspond pas à la charte, et un style d'indicateur différent (pointillé au lieu de plein). Ça tourne, donc fonctionnellement ça marche — l'équipe s'est dit « c'est bon, c'est un loader ». Delta-QA compare les captures d'écran et met en évidence les différences de taille, de couleur et de forme du loader — le composant qui ne ressemble plus à la référence ressort dans le diff.
💡
Le hover qui ne fonctionne plus
Un développeur ajoute un élément transparent par-dessus les boutons pour gérer du tracking analytique. Conséquence : le hover ne se déclenche plus — la souris survole l'élément invisible, pas le bouton. Visuellement, les boutons restent dans leur couleur par défaut au survol, le site paraît « mort ». Le changement concernait le tracking, pas les boutons — personne n'a pensé à vérifier le feedback visuel au survol. Delta-QA capture l'état hover des boutons et compare les captures : le bouton qui ne change plus de couleur ressort dans le diff.
Pret a detecter chaque regression visuelle ?
Telechargez Delta-QA et detectez les changements CSS dans vos pages web — sans code.