web-dev-qa-db-fra.com

Les animations CSS3 avec transformation génèrent des éléments flous sur Webkit

J'ai donc quelques éléments natifs (divs) auxquels différents effets sont appliqués (border-radius, box-shadow et transform: scale()). Quand je les anime, deux choses étranges se produisent:

  1. Même si je n'essaie pas d'animer l'échelle, si je ne la mets pas dans l'animation, elle est ignorée.
  2. Quand je mets la balance dans l'animation, Webkit floute les éléments

Voir l'exemple ici: http://jsfiddle.net/trolleymusic/RHeCL/ - les boutons en bas vont déclencher les problèmes.

Le premier problème se produit également dans Firefox, donc je suppose que c'est parce que c'est ainsi que la spécification d'animation est censée fonctionner. Pas ce que je voulais, mais bon, je vais vivre avec.

Le deuxième problème est juste bizarre. Je sais que cela a à voir avec transformation 3d parce que si je déclare (uniquement à des fins de test) -webkit-perspective ou -webkit-transform-style: preserve-3d; sur les éléments du cercle, le problème de flou est également causé. Ma confusion est que je n'essaie pas de transformer l'index z en tout, et j'ai également essayé les animations en utilisant purement translateY au lieu de translate.

Cela se produit dans Chrome (18), Chrome Canary (20) et Safari (5.1.2 & 5.1.4).

Alors, ai-je raison dans ce que je pense qui se passe? Et comment puis-je éviter le flou?

Scénario le plus défavorable: je ne peux utiliser que des tailles différentes pour les éléments au lieu de les redimensionner, ce n'est pas vraiment un problème - mais je pensais que ce serait une solution plus élégante et maintenant ce problème a surgi.

cssanimationcss3webkitcss-animations
20
Trolleymusic

Reportez-vous à cette réponse pour savoir pourquoi l'élément est flou: https://stackoverflow.com/a/4847445/814647

Résumé de ce qui précède: WebKit prend la taille originale/CSS avant de l'animer, et la traite comme une image, puis la redimensionne, produisant ainsi le flou.

Solution: Faites de la taille initiale la plus grande échelle que vous utilisiez et démarrez-la au départ avec une échelle plus basse (dans ce cas, vous souhaitez augmenter la taille de 5 et définir l'échelle 0,2)

UPDATE

Si je comprends bien, la raison pour laquelle il ignore l’échelle actuelle, c’est que vous ne définissez pas spécifiquement la traduction (je cherche le CSS pour le moment). Lorsque vous exécutez -webkit-animation, toutes les transformations (échelles) actuelles sont réinitialisées. Vous devez donc vous assurer que vos échelles y figurent. Je suis en train de regarder les fichiers CSS pour changer, cela ne change donc que la position:

17
Josh Allen

Le meilleur moyen que j'ai trouvé est d'attendre que l'animation soit terminée, puis d'appliquer les transformations directement à l'élément et de supprimer la classe d'animation. Quelque chose comme cela fonctionne pour moi, ne produisant aucun problème:

$m.bindOnce($m('win-text'), 'webkitAnimationEnd', function(){ //avoid blurred problem with animating scale property in webkit
    $m('win-text').style.webkitTransform = 'scale(1.5) translateY(-60px)';
    $m.removeClass($m('win-text'), 'final');
});

J'utilise une bibliothèque différente de jQuery, mais vous voyez l'idée.

0
Gianluca Pinoci