Un petit système pratique pour les entrées animées dans CSS

Un site Web n'est pas seulement un document statique, certains détails peuvent rendre le site Web plus vif et intéressant. Que se passe-t-il si le contenu de la page Web ne s'affiche pas directement, mais apparaît de manière pop-up, diapositive, fondu ou rotation? Bien que de telles animations ne soient pas toujours pratiques, dans certains cas, ils peuvent attirer l'attention des utilisateurs sur des éléments spécifiques, renforcer les distinctions entre les éléments et même indiquer les changements d'état, ils ne sont donc pas complètement inutiles.

J'ai donc créé un ensemble d'outils CSS pour ajouter des effets d'animation à un élément lorsqu'il entre dans le champ de vision. Oui, c'est une implémentation CSS complètement pure. Il fournit non seulement plusieurs animations et variantes, mais prend également en charge l'effet entrelacé des animations, qui peut être presque comme la création d'une scène.

Par exemple, comme ceci:

Ce n'est vraiment qu'une version simplifiée de cette version plus avancée:

Nous expliquons d'abord les bases de la création d'animations, puis introdissons certains des détails que j'ai ajoutés, comment entrelacer les animations et comment les appliquer dans des éléments HTML, et enfin, nous verrons comment réaliser tout cela en ce qui concerne les préférences de mouvement réduites de l'utilisateur.

Connaissances de base

L'idée principale est d'ajouter une animation CSS @keyframes simple, de l'appliquer à tout ce que nous voulons animer la page lorsqu'elle se charge. Laissons un élément s'estomper et passer de opacity: 0 à opacity: 1 en deux secondes:

 .Animate {
  Durée d'animation: 0,5 s;
  nom d'animation: animer-fade;
  Animation-retard: 0,5 s;
  Mode de remplissage d'animation: en arrière;
}

@keyframes animate-fade {
  0% {opacité: 0;}
  100% {opacité: 1;}
}

Veuillez noter qu'il existe également un animation-delay de 0,5 seconde ici pour permettre au reste du site Web de se charger en premier. animation-fill-mode: backwards est utilisé pour garantir que notre état d'animation initial est actif lorsque la page se charge. Sans cela, nos éléments d'animation apparaîtront avant de vouloir.

Si nous sommes paresseux, nous pouvons nous arrêter ici. Cependant, les lecteurs de CSS-Tricks ne seront certainement pas paresseux, alors voyons comment utiliser un système pour améliorer ce genre de chose.

Plus d'animations cool

C'est plus amusant d'avoir une variété d'animations que d'utiliser une ou deux animations. Nous n'avons même pas besoin de créer un tas de nouveaux @keyframes pour faire plus d'animations. La création d'une nouvelle classe est très simple, nous devons simplement changer les cadres utilisés par l'animation et le garder la même pour tous les temps.

Le nombre d'animations CSS est presque illimité. (Voir animate.style, qui est une énorme collection.) Les filtres CSS tels que blur() , brightness() et saturate() , et bien sûr les transformations CSS peuvent également être utilisées pour créer plus de variantes.

Mais maintenant, commençons par une nouvelle classe d'animation qui utilise la transformation CSS pour rendre l'élément "apparaître" en place.

 .animate.pop {
  Durée d'animation: 0,5 s;
  nom d'animation: animate-pop;
  Animation-TIMing-Function: cubic-bezier (.26, .53, .74, 1.48);
}

@keyframes animate-pop {
  0% {
    Opacité: 0;
    transformée: échelle (0,5, 0,5);
  }

  100% {
    Opacité: 1;
    transformée: échelle (1, 1);
  }
}

J'ai ajouté une petite courbe temporelle cubic-bezier() de l'indispansplice cubic-bezier.com de Lea Verou pour un effet de rebond résilient.

Ajouter un retard

Nous pouvons faire mieux! Par exemple, nous pouvons faire animer des éléments à différents moments. Cela crée un effet entrelacé, créant des mouvements d'apparence complexe sans avoir besoin de beaucoup de code.

Cela semble bien en utilisant des filtres CSS, des conversions CSS et une animation entrelacée d'environ un dixième de seconde sur trois pages d'éléments:

Tout ce que nous faisons est de créer une nouvelle classe pour chaque élément qui sépare le temps que l'élément commence à l'animation, en utilisant animation-delay qui est un dixième de deuxième arrière.

 .Delay-1 {Animation-Delay: 0.6S;  
.Delay-2 {Animation-Delay: 0.7S;
.Delay-3 {Animation-Delay: 0,8S;

Tout le reste est exactement le même. N'oubliez pas que notre latence de base est de 0,5 s, donc ces classes d'assistance commencent à compter à partir de là.

Respecter les préférences d'accessibilité

Soyons d'excellents citoyens Web et supprimons les animations pour les utilisateurs qui ont permis de réduire les préférences sportives:

 Écran @Media et (préfère le mouvement réduit: réduire) {
  .Animate {Animation: Aucun! IMPORTANT;}
}

De cette façon, l'animation ne se chargera pas et les éléments entreront dans le champ de vision comme d'habitude. Le mouvement "réduire" ne signifie pas toujours le mouvement "d'élimination", ce qui mérite d'être rappelé.

Appliquer l'animation aux éléments HTML

Jusqu'à présent, nous avons examiné l'animation de base ainsi que celle légèrement plus avancée, que nous pouvons la rendre plus avancée avec des retards d'animation entrelacés (inclus dans la nouvelle classe). Nous voyons également comment respecter les préférences sportives des utilisateurs en même temps.

Bien qu'il existe des démonstrations en temps réel qui montrent ces concepts, nous ne couvrons pas réellement comment appliquer notre travail à HTML. Ce qui est cool, c'est que nous pouvons l'utiliser sur presque tous les éléments, que ce soit div, span, article, en-tête, section, table, formulaire ... vous savez.

Ce que nous allons faire, c'est: nous voulons utiliser notre système d'animation sur trois éléments HTML, chacun obtenant trois classes. Nous pouvons cocoder tout le code d'animation à l'élément lui-même, mais le répartir nous permet d'obtenir un système d'animation réutilisable.

• .Animate: c'est la classe de base qui contient nos déclarations d'animation de base et notre temps.
• Type d'animation: nous utiliserons l'animation "pop-up" précédente, mais nous pouvons également utiliser l'animation fondu. Cette classe est techniquement facultative, mais c'est un excellent moyen d'appliquer différents mouvements.
• .retard- : Comme mentionné précédemment, nous pouvons créer différentes classes pour entrelacer le temps que l'animation commence sur chaque élément, ce qui entraîne un effet soigné. Cette classe est également facultative.

Donc, nos éléments d'animation peuvent maintenant ressembler à ceci:

<h2> Un!</h2>
<h2>Deux!</h2>
<h2>Trois!</h2>

Comptons-les!

en conclusion

Vérifiez-le: nous commençons par un ensemble apparemment basique @keyframes et le transformons en un système complet pour appliquer des animations intéressantes pour les éléments entrant dans le champ de vision.

C'est bien sûr très intéressant. Mais le plus gros point à retenir pour moi est que les exemples que nous voyons forment un système complet qui peut être utilisé pour créer des lignes de base, différents types d'animations, des retards entrelacés et respectant les préférences de mouvement des utilisateurs. Pour moi, ce sont tous les éléments d'un système flexible et facile à utiliser. Cela nous a donné beaucoup avec très peu de choses sans un tas de restes supplémentaires.

Ce que nous couvrons peut vraiment être une bibliothèque d'animation complète. Mais bien sûr, je ne me suis pas arrêté là. Je vous ai fourni tous mes fichiers d'animation CSS. Il y a plusieurs types d'animation, y compris 15 classes avec différents retards, qui peuvent être utilisés pour entrelacer les choses. Je les utilise dans mes propres projets, mais c'est encore une première version et j'aimerais recevoir des commentaires à ce sujet. S'il vous plaît profitez et faites-moi savoir ce que vous pensez dans les commentaires!

 / * =========================================================================================================.
Système d'animation par Neale Van Fleet de Rogue Amoeba
=====================================================================================================.
.Animate {
  Durée d'animation: 0,75s;
  Animation-retard: 0,5 s;
  nom d'animation: animer-fade;
  Animation-TIMing-Function: cubic-bezier (.26, .53, .74, 1.48);
  Mode de remplissage d'animation: en arrière;
}

/ * S'estomper dans * /
.animate.fade {
  nom d'animation: animer-fade;
  Animation-TIMing-Function: facilité;
}

@keyframes animate-fade {
  0% {opacité: 0;}
  100% {opacité: 1;}
}

/ * Apparaître * /
.animate.pop {nom d'animation: Animate-pop;};

@keyframes animate-pop {
  0% {
    Opacité: 0;
    transformée: échelle (0,5, 0,5);
  }
  100% {
    Opacité: 1;
    transformée: échelle (1, 1);
  }
}

/ * Blur dans * /
.animate.blur {
  Nom d'animation: Animate-Blur;
  Animation-TIMing-Function: facilité;
}

@KeyFrames Animate Blur {
  0% {
    Opacité: 0;
    Filtre: flou (15px);
  }
  100% {
    Opacité: 1;
    Filtre: Blur (0px);
  }
}

/ * Briller dans * /
.animate.glow {
  Nom d'animation: Animate-Glow;
  Animation-TIMing-Function: facilité;
}

@KeyFrames Animate-Glow {
  0% {
    Opacité: 0;
    Filtre: luminosité (3) sature (3);
    transformée: échelle (0,8, 0,8);
  }
  100% {
    Opacité: 1;
    Filtre: luminosité (1) sature (1);
    transformée: échelle (1, 1);
  }
}

/ * Grandir en * /
.animate.grow {nom d'animation: Animate-Grow;

@KeyFrames Animate-Grow {
  0% {
    Opacité: 0;
    transformée: échelle (1, 0);
    Visibilité: cachée;
  }
  100% {
    Opacité: 1;
    transformée: échelle (1, 1);
  }
}

/ * Splat dans * /
.animate.splat {nom d'animation: Animate-Splat;}

@keyframes animate-splat {
  0% {
    Opacité: 0;
    Transformer: échelle (0, 0) Rotation (20Deg) traduire (0, -30px);
    }
  70% {
    Opacité: 1;
    transformée: échelle (1.1, 1.1) Rotation (15deg);
  }
  85% {
    Opacité: 1;
    Transformer: échelle (1.1, 1.1) Rotation (15Deg) traduire (0, -10px);
  }

  100% {
    Opacité: 1;
    Transformer: échelle (1, 1) Rotation (0) traduire (0, 0);
  }
}

/ * Rouler dans * /
.Animate.roll {nom d'animation: Animate-Roll;

@keyframes animate-roll {
  0% {
    Opacité: 0;
    Transformer: échelle (0, 0) Rotation (360Deg);
  }
  100% {
    Opacité: 1;
    transformée: échelle (1, 1) Rotation (0deg);
  }
}

/ * Retourner dans * /
.animate.flip {
  Nom d'animation: Animate-Flip;
  style transform: Preserve-3d;
  Perspective: 1000px;
}

@keyframes animate-flip {
  0% {
    Opacité: 0;
    Transformée: échelle Rotatex (-120Deg) (0,9, 0,9);
  }
  100% {
    Opacité: 1;
    Transformer: échelle Rotatex (0Deg) (1, 1);
  }
}

/ * Tourner dans * /
.animate.spin {
  Nom d'animation: Animate-Spin;
  style transform: Preserve-3d;
  Perspective: 1000px;
}

@KeyFrames Animate-Spin {
  0% {
    Opacité: 0;
    Transformée: échelle Rotatey (-120Deg) (0,9, .9);
  }
  100% {
    Opacité: 1;
    Transformer: échelle Rotatey (0deg) (1, 1);
  }
}

/ * Glisser dans * /
.Animate.slide {nom d'animation: Animate-Slide;

@KeyFrames Animate-Slide {
  0% {
    Opacité: 0;
    Transform: tradlate (0, 20px);
  }
  100% {
    Opacité: 1;
    Transform: tradlate (0, 0);
  }
}

/ * Tomber * /
.animate.drop { 
  nom d'animation: animer-drop; 
  Animation-TIMing-Function: cubic-bezier (.77, .14, .91, 1.25);
}

@keyframes animate-drop {
0% {
  Opacité: 0;
  Transformer: traduire (0, -300px) échelle (0,9, 1,1);
}
95% {
  Opacité: 1;
  Transformer: traduire (0, 0) échelle (0,9, 1,1);
}
96% {
  Opacité: 1;
  Transforme: traduire (10px, 0) échelle (1,2, 0,9);
}
97% {
  Opacité: 1;
  Transformer: traduire (-10px, 0) échelle (1,2, 0,9);
}
98% {
  Opacité: 1;
  Transforme: traduire (5px, 0) échelle (1,1, 0,9);
}
99% {
  Opacité: 1;
  Transforme: traduire (-5px, 0) échelle (1,1, 0,9);
}
100% {
  Opacité: 1;
  transformée: traduire (0, 0) échelle (1, 1);
  }
}

/ * Des retards d'animation * /
.delay-1 {
  Animation-retard: 0,6 s;
}
.delay-2 {
  Animation-retard: 0,7 s;
}
.delay-3 {
  Animation-retard: 0,8 s;
}
.delay-4 {
  Animation-retard: 0,9 s;
}
.delay-5 {
  Animation-retard: 1s;
}
.delay-6 {
  Animation-retard: 1.1S;
}
.delay-7 {
  Animation-retard: 1.2s;
}
.delay-8 {
  Animation-retard: 1.3S;
}
.delay-9 {
  Animation-retard: 1.4S;
}
.delay-10 {
  Animation-retard: 1,5s;
}
.delay-11 {
  Animation-retard: 1,6S;
}
.delay-12 {
  Animation-retard: 1,7S;
}
.delay-13 {
  Animation-retard: 1.8S;
}
.delay-14 {
  Animation-retard: 1,9s;
}
.delay-15 {
  Animation-retard: 2s;
}

Écran @Media et (préfère le mouvement réduit: réduire) {
  .Animate {
    Animation: Aucune! IMPORTANT;
  }
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!