Share
L'animation CSS3 est sacrément cool. Cela nous permet de donner une vie matérielle plus rapide à nos sites Web, auparavant ennuyeux. Cependant, il y a quelques pièges et pratiques importants que vous devriez connaître - creusons dans.
Le navigateur prend en charge l’animation CSS3: Mozilla Firefox a rejoint WebKit en tant que support complet, et Internet Explorer 10 ainsi que Opera 12 ont promis une prise en charge future. Cela signifie que nous pouvons commencer à les utiliser sans crainte aujourd'hui. Cependant, ce soutien florissant n’est pas sans problèmes.
En tant que propriété native de Webkit, vous vous attendez à ce que l'animation CSS bénéficie de la prise en charge complète de tous les navigateurs Webkit. Malheureusement, ce n'est pas si simple. Le navigateur intégré aux appareils Android Est-ce que animations de soutien - dans une certaine mesure. Le problème est que cela ne supportera que les animations avec une seule propriété changeante.
Supposons donc que nous voulions utiliser Animate.css, mon framework d'animations, pour créer un site Web super cool. La plupart des animations telles que bounceInLeft fonctionneront parfaitement sur les dernières versions de Chrome, Safari, Firefox et iOS Safari. Mais sur un appareil Android, l'utilisateur ne verra pas un seul élément animé. L'animation s'exécute, mais l'élément disparaît dès qu'il est terminé.
Cette bizarrerie étrange signifie que les seules animations que nous pouvons exécuter sur les appareils Android sont des propriétés à propriété unique, telles que fadeIn et bounce. Malheureusement, il est difficile de savoir si Android 4.0 fournira ou non un meilleur support - espérons.
Jusqu'à ce que ces appareils Android prennent davantage en charge, le mieux est de fournir des solutions de secours Javascript ou des animations moins complexes. Mais comment pouvez-vous dire à votre site de ne pas utiliser vos animations super cool sur ces appareils? Utiliser Modernizr n’aidera pas ici - il détectera que le navigateur prend en charge les animations. Heureusement, nous pouvons vérifier l'agent utilisateur et proposer une autre feuille de style ou un autre script. En PHP, c'est aussi simple que cela:
$ ua = strtolower ($ _ SERVER ['HTTP_USER_AGENT']); if (stripos ($ ua, 'android')! == false) // && stripos ($ ua, 'mobile')! == false) $ css = "droid-style.css"; else $ css = "style.css";
Cet extrait va se charger droid-style.css sur les appareils Android, ce qui signifie que nous pouvons conserver nos animations de fantaisie pour les navigateurs qui peuvent les utiliser. Excellent!
Les appareils iOS comme iPhone et iPad prennent en charge les animations CSS3 avec une accélération matérielle totale, mais uniquement s'il s'agit d'une transformation 3D. Si l'animation n'implique pas de transformation 3D, elle sera accélérée uniquement par le logiciel, ce qui peut entraîner des animations lentes..
Pour obtenir une accélération matérielle complète sur les animations, vous devez activer le moteur de rendu 3D. C'est aussi simple que d'ajouter cette règle à votre CSS:
.conteneur -webkit-transform: translateZ (0);
Génial! Mais pourquoi ne pas appliquer cette règle au corps? Eh bien, pour une raison quelconque, l'activation du moteur 3D joue un peu avec la mise en page de la page. Les éléments fixes ou parfaitement positionnés se décaleront légèrement si cela est appliqué au corps.
Comme pour tout ce qui se passe dans le monde CSS3, cette astuce a un coût. Pas un lourd, mais un coût néanmoins. Jetez un oeil à cette comparaison scientifique:
Il faut regarder attentivement pour le voir, mais l'activation du moteur de rendu 3D rend l'antialiasing des niveaux de gris du texte. Cela se traduit par un texte légèrement plus net, particulièrement visible sur les tailles de texte extrêmement petites ou extrêmement grandes. Comme je l'ai dit, ce n'est pas grave, mais c'est toujours un bug. Ajouter -webkit-font-lissage: antialiasé; peut aider à réduire légèrement le problème sur les navigateurs Webkit.
Imaginons que vous deviez déplacer un élément d'un endroit à un autre sans que cela affecte la mise en page de la page.. Traduire est votre meilleur ami ici - la propriété de traduction, telle que définie par le W3C:
… N'affecte pas le flux du contenu entourant l'élément transformé. Cependant, la valeur de la zone de débordement prend en compte les éléments transformés.
Regarde ça? Cela n'affecte pas le flux du contenu environnant. Mais ça Est-ce que affecter le débordement du document. Cela signifie que si vous déplacez un élément hors de la page (ce qui est le cas de quelques animations sur Animate.css), des barres de défilement seront affichées..
Les navigateurs traitent ce comportement un peu différemment entre eux. Safari et Chrome créeront des barres de défilement, mais une fois la transformation terminée et l'opacité de l'élément tombée à zéro, les barres de défilement seront supprimées, comme si l'élément avait été supprimé. Firefox, en revanche, crée des barres de défilement persistantes qui resteront jusqu'à ce que l'élément soit supprimé du document ou défini sur affichage: aucun. La meilleure façon de travailler avec ces transformations est d'utiliser un peu de magie Javascript. Si vous connaissez la longueur de votre animation, vous devez supprimer l'élément du DOM une fois l'animation terminée. Alternativement, vous pouvez regarder quand l'animation est complète avec du Javascript intelligent:
Accentsconagua
var element = document.getElementById ("# box"); element.addEventListener ("webkitAnimationEnd", function () this.style.webkitAnimationName = "";, false); document.getElementById ("bouton #"). onclick = function () element.style.webkitAnimationName = "shake"; // vous voudrez probablement empêcherDefault ici. ; Ce petit extrait provient en réalité d'un thread Stack Overflow. C'est un bon, alors marque-le!
Si vous écrivez votre propre animation CSS, vous remarquerez peut-être quelque chose d'étrange sur les appareils Safari, Chrome et iOS. Juste avant que l'animation s'exécute, l'élément animé en question clignote avant de commencer..
La raison derrière ce phénomène n'est pas claire, mais la solution est assez simple. Ajoutant simplement le -webkit-backface-visibilité: caché; règle à votre CSS devrait aider à prévenir le problème. Appliquez-le au conteneur de l'élément, comme suit:
.conteneur -webkit-backface-visibilité: caché;
Cela se résume à un autre problème d’accélération matérielle - l’utilisation de cette propriété accélère tout simplement l’accélération. Vous pouvez également utiliser des choses comme -webkit-perspective: 1000; ou d'autres propriétés 3D.
Voici un autre couple de vérités malheureuses avec les animations CSS et les transitions. Vous ne pouvez pas utiliser d'animations ou de transitions sur des pseudo-éléments. Ce fait est un peu mal documenté sur le Web, mais il est important. Disons, par exemple, que vous vouliez un :après pseudo-élément à fondre dans la visibilité lorsque vous survolez son parent. Malheureusement, il va se casser entre les états au lieu de passer en douceur. À notre connaissance, il s'agit d'un comportement inhabituel: des rapports de bogue ont été enregistrés pour Chrome et Webkit - et Firefox prend en charge ces transitions. Vous pouvez suivre l'état actuel de la prise en charge des transitions et des animations sur des pseudo-éléments via des astuces CSS..
Toutefois, il convient de noter que si vous appliquez des transitions ou des animations à un élément contenant des pseudo-éléments, ces transitions seront transférées aux pseudo-éléments..
Et maintenant, un autre coup dans les dents. Les transitions et les animations réinitialisent l'index z d'un objet. Si vous souhaitez animer des objets bien empilés, leur ordre d'empilement sera réinitialisé. C'est une triste vérité et encore une fois, ce n'est pas ce dont beaucoup de gens parlent.
Je vais peut-être entrer dans des eaux assez profondes ici, mais vous pouvez rendre vos animations beaucoup plus réalistes en jouant avec les fonctions de minutage. Si vous ne laissez que les fonctions de minutage par défaut pour les animations (facilité), vous pouvez vous retrouver avec de jolis effets. Cependant, si vous essayez de recréer un motif de mouvement particulier en CSS, il est important de connaître les différences entre les différentes fonctions de minutage. Prenons l'exemple de l'animation 'charnière' de Animate.css..
L'idée derrière cette animation était de faire tomber l'élément de sa position actuelle, de basculer d'un coin à un moment, puis de tomber complètement - un peu comme un signe cassé. Voici le piège - l'animation nécessitera une variété de fonctions de minutage pour le rendre réaliste. Pensez à ce mouvement dans la vraie vie; quand le signe tombe et commence à se balancer, il commence lentement, puis accélère, puis ralentit à son apogée. Cependant, quand il tombe complètement, il devrait tomber assez soudainement et accélérer à mesure qu'il tombe. On dirait que nous avons besoin des deux facilité d'entrée et facilité dans.
C'est en fait assez facile. Dans vos images clés, vous pouvez déclarer les différentes fonctions de minutage - comme ceci:
@keyframes hinge 0% animation-timing-function: facilité d'entrée / sortie; transformer: faire pivoter (-120 ° C); origine de la transformation: en haut à gauche; 25% animation-timing-function: facilité d'entrée / sortie; transformer: faire pivoter (70deg); origine de la transformation: en haut à gauche; 50% animation-timing-function: facilité d'entrée / sortie; transformer: faire pivoter (-120 ° C); origine de la transformation: en haut à gauche; 100% animation-timing-function: facilité; transformer: faire pivoter (0deg) translateY (200%);
En utilisant diverses fonctions de minutage, plutôt que simplement celle par défaut, nous contrôlons mieux le mode de lecture de l'animation. Si vous exécutez l'animation de la charnière sans les fonctions de minutage personnalisées, vous pouvez voir à quel point elle semble étrange. Lorsque vous écrivez vos animations, comparez-les à des exemples réels du même mouvement. Ralentissez dans votre esprit et réfléchissez à la façon dont chacun est chronométré.
C'est peut-être la chose la plus importante que vous emportiez, alors écoutez bien. Je crois fermement que les animations CSS doivent être utilisées avec parcimonie pour une interaction accrue, et rien de plus. Des gens intelligents comme Anthony Calzadilla font des choses folles et cool avec des animations CSS, mais à mon avis, dans le monde réel, ces animations devraient être rares et éloignées les unes des autres..
Prenez cette page comme exemple. Tout ici (sauf le gif animé obligatoire) est animé en CSS. C'est un exemple extrême, mais vous pouvez voir pourquoi je m'inquiète de la surutilisation de ces choses.
Il en va de même pour toutes les propriétés CSS3. Les transitions, les ombres et les dégradés doivent être utilisés avec subtilité. Je pense que la page de destination de Owlr est un très bon exemple. Envoyer un email invalide ou un formulaire vide va créer une erreur de validation avec quelques animations non essentielles pour attirer l'attention.
Dans son livre CSS3 For Web Designers, Dan Cederholm parle beaucoup de la "couche d'expérience". Il souligne le fait que toutes les valeurs CSS3 présentées dans son livre ne sont que pour une couche d'expérience supplémentaire - les effets ajoutés ne sont pas essentiels et devraient toujours se dégrader avec élégance dans les navigateurs qui ne les prennent pas complètement en charge. Rappelez-vous cette règle et vous deviendrez plus puissant que vous ne pouvez l'imaginer. Ou quelque chose comme ça.
La plupart des ordinateurs disposent de suffisamment de puissance pour exécuter des transitions et des animations CSS3 sans problème. Toutefois, plus vous essayez d'extraire votre CSS, plus les performances en seront affectées..
Prenons par exemple une animation simple qui déplace un div de gauche à droite à l'infini. Des trucs simples. Rendons ce cadre un peu plus intéressant - donnez-lui une ombre, du texte, peut-être un dégradé… toutes ces règles affecteront les performances de la page. Si vous avez donné votre div une ombre boîte avec un rayon de flou ridicule (je parle dans les centaines ici), vous remarquerez une baisse importante de la performance. Le navigateur travaille tellement dur à essayer de comprendre comment il doit rendre les pixels constituant l’ombre de la boîte qu’il commence à accumuler les ressources nécessaires à l’animation, voire au reste de la page - de simples tâches telles que le défilement peuvent devenir terriblement lentes. Réduisez au minimum les améliorations visuelles, en particulier les ombres.
L'accélération matérielle permet d'éviter ce problème, mais vous devez en être conscient. Tous vos utilisateurs n'auront pas le luxe de l'accélération matérielle, et les graphiques rendus par logiciel peuvent avoir des conséquences néfastes sur l'ordinateur..
J'espère que vous êtes plus au courant des pièges de l'animation CSS3 et de toutes les bizarreries de son navigateur qu'il ne l'était auparavant. Mais n'oubliez pas que ces fonctionnalités CSS3 sont encore très intéressantes et disponibles pour utilisation aujourd'hui. Le support est de plus en plus important et il indique un monde dans lequel nous pouvons nous éloigner de Javascript pour les effets visuels - ce qui est une bonne chose si vous me le demandez..
Je vais terminer avec ce simple rappel:
«Votre contenu et vos fonctionnalités ont priorité sur tout le reste. Si vous utilisez des fonctionnalités CSS3, assurez-vous que votre site fonctionnera de la même manière pour tous les utilisateurs qui n'en ont pas. "
Si vous en avez assez de tirer les cheveux à cause de bogues déroutants, consultez Envato Studio où vous pouvez demander de l'aide à des développeurs triés sur le volet qui aiment effacer les bogues et apporter des corrections.!
