localisation actuelle: Maison > Télécharger > Effets JS > Effets spéciaux CSS3 > Chat à effets spéciaux CSS3 accroché à la chaîne se balançant à gauche et à droite
Chat à effets spéciaux CSS3 accroché à la chaîne se balançant à gauche et à droite
Classer: Effets JS / Effets spéciaux CSS3 | Temps de libération: 2017-12-18 | visites: 1906 |
Télécharger: 56 |
Derniers téléchargements
Aquarium Fantastique
Filles en première ligne
Ailes d'étoiles
Petite Fée des Fleurs Paradis Féérique
Restaurant Histoire mignonne
Exploration de voyage à Shanhe
Amour et producteur
Le cerveau le plus puissant 3
Odd Dust : Damila
Jeune voyage vers l'Ouest 2
24 heuresClassement de lecture
- 1 Comment puis-je implémenter la troncature des points de suspension dans un élément de texte redimensionnable ?
- 2 diskmsg.dll – Qu'est-ce que diskmsg.dll ?
- 3 dialupmanager.dll – Qu'est-ce que dialupmanager.dll ?
- 4 diagrpt.dll – Qu'est-ce que diagrpt.dll ?
- 5 Pourquoi une transition CSS avec facilité d'entrée et de sortie se comporte-t-elle en douceur au survol mais brusquement à la sortie de la souris ?
- 6 dicrhash.dll – Qu'est-ce que dicrhash.dll ?
- 7 Comment injecter des dépendances dans des objets auto-instanciés au printemps ?
- 8 Pourquoi PHP fait-il écho à « 2 » lors de l'ajout et de la concaténation d'entiers ?
- 9 Pourquoi mon application Java utilise-t-elle GMT au lieu du fuseau horaire de mon système d'exploitation et comment puis-je y remédier ?
- 10 Comment envoyer un ping efficace aux URL HTTP en Java : un guide complet
- 11 Pourquoi mon `std::fstream` ne parvient-il pas à créer un fichier ?
- 12 Comment se lier aux classes CSS dans les vues XML UI5 à l'aide de l'attribut « class » ?
- 13 Pourquoi la récupération de panique avec des variables locales ne modifie-t-elle pas les valeurs renvoyées dans Go ?
- 14 digiconf.dll – Qu'est-ce que digiconf.dll ?
- 15 Comment puis-je générer des diagrammes UML à partir de mes classes PHP existantes ?
Derniers tutoriels
-
- Aller au langage pratique GraphQL
- 1923 2024-04-19
-
- Premiers pas avec MySQL (Professeur Mosh)
- 1752 2024-04-07
-
- Mock.js | Axios.js | Json | Dix jours de cours de qualité
- 2562 2024-03-29
Le chat à effets spéciaux CSS3 accroché à la chaîne se balançant à gauche et à droite est un effet de balancement animé réalisé avec CSS3.
<tête>
<meta charset="utf-8">
<title>css3猫挂在线球上左右摇摆动画特效</title>
<style>
.all-wrap {
-webkit-animation : bob 7s cubique-bézier(0.5, 0, 0.5, 1) infini les deux ;
animation : bob 7s cubique-bézier (0,5, 0, 0,5, 1) infini les deux ;
}
.tous {
haut : 10rem ;
à gauche : calc(50% - 2,5rem);
position : absolue ;
largeur : 5rem;
hauteur : 5rem;
-webkit-transform-origin : centre -20rem;
transformation-origine : centre -20rem;
-webkit-animation : swing 7s cubique-bézier (0,5, 0, 0,5, 1) infini les deux ;
animation : swing 7s cubique-bézier (0,5, 0, 0,5, 1) infini les deux ;
}
.tous :avant {
hauteur : 20rem;
largeur : 2 px ;
couleur d'arrière-plan : #DB242A ;
à gauche : calc(50% - 1px);
en bas : 20rem ;
}
.fil {
position : absolue ;
haut : 0 ;
gauche : 0;
largeur : 80px ;
hauteur : 80px ;
rayon de bordure : 50 % ;
image d'arrière-plan : -webkit-radial-gradient (en haut à gauche, cercle, #e97c7f, #db242a 50 %, #af1d22) ;
image d'arrière-plan : dégradé radial (cercle en haut à gauche, #e97c7f, #db242a 50%, #af1d22);
indice z : 1 ;
}
.yarn : avant, .yarn : après {
position : absolue ;
largeur : 20 px ;
hauteur : 20px ;
rayon de bordure : 50 % ;
couleur de fond : blanc ;
haut : -1px ;
}
.fil:avant {
à gauche : calc(50% + 7px);
couleur d'arrière-plan : #b1bce6;
}
.yarn :après {
à droite : calc(50% + 7px);
couleur d'arrière-plan : #D5E8F8 ;
}
.cat-wrap {
position : absolue ;
haut : 0 ;
à gauche : calc(50% - 45px);
largeur : 90px ;
hauteur : 130px ;
-webkit-animation : oscillation inversée 7s cubique-bézier (0,5, 0, 0,5, 1) infini les deux ;
animation : oscillation inversée 7s cubique-bézier (0,5, 0, 0,5, 1) infini les deux ;
-webkit-transform-origin : en haut au centre ;
transform-origin : en haut au centre ;
}
.cat {
position : absolue ;
haut : 0 ;
gauche : 0;
largeur : 100 % ;
hauteur : 100% ;
-webkit-animation : swing 7s 0.2s infini les deux ;
animation : swing 7s 0,2s infini les deux ;
-webkit-transform-origin : en haut au centre ;
transform-origin : en haut au centre ;
}
.cat-supérieur {
position : absolue ;
haut : 0 ;
gauche : 0;
largeur : 100 % ;
hauteur : 100% ;
-webkit-transform-origin : en haut au centre ;
transform-origin : en haut au centre ;
indice z : 1 ;
}
.cat-upper .cat-leg {
position : absolue ;
largeur : 20 px ;
hauteur : 100% ;
couleur de fond : blanc ;
indice z : -1 ;
image d'arrière-plan : -webkit-linear-gradient (gauche, #D5E8F8, #D5E8F8 20 %, #8B9BD9) ;
image d'arrière-plan : dégradé linéaire (à droite, #D5E8F8, #D5E8F8 20 %, #8B9BD9) ;
}
.cat-upper .cat-leg:nth-child(1) {
bordure-radius supérieur-gauche : 100px ;
gauche : 10px ;
}
.cat-upper .cat-leg:nth-child(1):après {
gauche : 50% ;
}
.cat-upper .cat-leg:nth-child(2) {
bordure en haut à gauche : 0 ;
bordure en haut à droite : 100 px ;
à droite : 10 px ;
}
.cat-upper .cat-leg:nth-child(2):après {
à droite : 50 % ;
}
.cat-inférieur-wrap {
hauteur : 90% ;
largeur : 100 % ;
position : absolue ;
haut : 100 % ;
largeur : 75px ;
à gauche : calc(50% - 37,5px);
-webkit-animation : swing inversé 7s 0,2s infini les deux ;
animation : swing inversé 7s 0,2s infini les deux ;
-webkit-transform-origin : en haut au centre ;
transform-origin : en haut au centre ;
}
.cat-inférieur {
position : absolue ;
haut : 0 ;
gauche : 0;
largeur : 100 % ;
hauteur : 100% ;
-webkit-animation : swing 7s 0.5s infini les deux ;
animation : swing 7s 0,5s infini les deux ;
-webkit-transform-origin : en haut au centre ;
transform-origin : en haut au centre ;
}
.cat-inférieur : après {
position : absolue ;
haut : 0 ;
gauche : 0;
largeur : 100 % ;
hauteur : 100% ;
rayon de bordure : 100 px ;
image d'arrière-plan : -webkit-radial-gradient (10px 50px, cercle, #ffffff, #ffffff 40%, #d5e8f8 65%, #8b9bd9);
image d'arrière-plan : dégradé radial (cercle à 10 px 50 px, #ffffff, #ffffff 40 %, #d5e8f8 65 %, #8b9bd9) ;
indice z : 1 ;
}
.cat-inférieur .cat-leg, .cat-inférieur .cat-paw {
indice z : -1 ;
position : absolue ;
hauteur : 20px ;
largeur : 20 px ;
-webkit-animation : swing-leg 7s 0.3s infini les deux ;
animation : jambe oscillante 7s 0,3s infinie les deux ;
indice z : 1 ;
-webkit-transform-origin : en haut au centre ;
transform-origin : en haut au centre ;
bordure en haut à gauche : 20px ;
bordure en haut à droite : 20px ;
image d'arrière-plan : -webkit-linear-gradient (gauche, blanc, #D5E8F8, #8B9BD9) ;
image d'arrière-plan : dégradé linéaire (à droite, blanc, #D5E8F8, #8B9BD9) ;
}
.cat-inférieur > .cat-leg {
en bas : 20 px ;
}
.cat-inférieur > .cat-leg .cat-leg {
haut : 25% ;
}
.cat-inférieur > .cat-leg + .cat-leg {
à droite : 0 ;
}
.cat-inférieur .cat-patte {
haut : 50 % ;
rayon de bordure : 50 % ;
couleur d'arrière-plan : #fff;
}
.cat-inférieur .cat-tail {
position : absolue ;
hauteur : 15px ;
largeur : 10px ;
-webkit-animation : swing-tail 7s cubique-bézier (0,5, 0, 0,5, 1) infini les deux ;
animation : swing-tail 7s cubique-bézier (0,5, 0, 0,5, 1) infini les deux ;
-webkit-transform-origin : en haut au centre ;
transform-origin : en haut au centre ;
indice z : 0;
image d'arrière-plan : -webkit-linear-gradient (gauche, blanc, #D5E8F8, #8B9BD9) ;
image d'arrière-plan : dégradé linéaire (à droite, blanc, #D5E8F8, #8B9BD9) ;
bordure-bas-gauche-radius : 10px ;
bordure en bas à droite : 10px ;
}
.cat-inférieur .cat-tail > .queue de chat {
haut : 50 % ;
}
.cat-inférieur > .queue de chat {
à gauche : calc(50% - 5px);
haut : 95 % ;
}
.tête de chat {
largeur : 90px ;
hauteur : 90px ;
image d'arrière-plan : -webkit-radial-gradient (10px 10px, cercle, #ffffff, #ffffff 40%, #d5e8f8 65%, #8b9bd9);
image d'arrière-plan : dégradé radial (cercle à 10px 10px, #ffffff, #ffffff 40%, #d5e8f8 65%, #8b9bd9);
rayon de bordure : 50 % ;
en haut : calc(100% - 45px);
}
.face-de-chat {
position : absolue ;
haut : 0 ;
gauche : 0;
hauteur : 100% ;
largeur : 100 % ;
-webkit-animation : face 7s cubique-bézier(0.5, 0, 0.5, 1) infini les deux ;
animation : face 7s cubique-bézier(0,5, 0, 0,5, 1) infini les deux ;
-webkit-transform-style : préserver-3d ;
style de transformation : préserver-3d ;
-webkit-perspective : 100px ;
perspective : 100 px ;
}
.oreilles de chat {
position : absolue ;
haut : 0 ;
gauche : 0;
hauteur : 50% ;
largeur : 100 % ;
indice z : -1 ;
}
.cat-oreille {
largeur : 20 px ;
hauteur : 100% ;
position : absolue ;
rayon de bordure : 5 px ;
haut : -10px ;
}
.cat-ear:premier-enfant {
gauche : 0;
-webkit-transform-origin : en haut à gauche ;
transform-origin : en haut à gauche ;
-webkit-transform : skewY(40deg);
transformation : skewY(40deg);
couleur de fond : blanc ;
}
.cat-ear:premier-enfant:avant {
gauche : 0;
rayon de bordure en haut à droite : 50 % ;
bordure en bas à droite : 50 % ;
couleur d'arrière-plan : #D7EBFB ;
}
.cat-ear:dernier-enfant {
à droite : 0 ;
-webkit-transform-origin : en haut à droite ;
transform-origin : en haut à droite ;
-webkit-transform : skewY(-40deg);
transformation : skewY(-40deg);
couleur d'arrière-plan : #d1e6f7;
}
.cat-ear:dernier-enfant:avant {
à droite : 0 ;
bordure-radius supérieur-gauche : 50 % ;
bordure-bas-gauche-rayon : 50 % ;
couleur d'arrière-plan : #e0f0fc;
}
.cat-ear:avant {
largeur : 60% ;
hauteur : 100% ;
haut : 10px ;
position : absolue ;
couleur d'arrière-plan : #fff;
}
.yeux de chat {
position : absolue ;
haut : 50 % ;
largeur : 100 % ;
hauteur : 6px ;
-webkit-animation : clignotement 7s étape-fin infinie les deux ;
animation : clignotement 7s étape-fin infinie les deux ;
}
.cat-eyes : avant, .cat-eyes : après {
position : absolue ;
hauteur : 6px ;
largeur : 6 px ;
rayon de bordure : 50 % ;
couleur d'arrière-plan : #4B4D75 ;
}
.cat-eyes :avant {
gauche : 20px ;
}
.cat-eyes : après {
à droite : 20 px ;
}
.cat-bouche {
position : absolue ;
largeur : 12px ;
hauteur : 8px ;
couleur d'arrière-plan : #4B4D75 ;
haut : 60 % ;
à gauche : calc(50% - 6px);
bordure en haut à gauche : 50 % 30 % ;
bordure en haut à droite : 50 % 30 % ;
bordure en bas à gauche : 50 % 70 % ;
bordure en bas à droite : 50 % 70 % ;
-webkit-transform : translateZ(10px);
transformer : traduireZ(10px);
}
.cat-mouth:avant, .cat-mouth:après {
position : absolue ;
largeur : 90% ;
hauteur : 100% ;
bordure : 2px solide #9FA2CB ;
haut : 80 % ;
rayon de bordure : 100 px ;
couleur de la bordure supérieure : transparent ;
indice z : -1 ;
}
.cat-mouth:avant {
couleur de la bordure gauche : transparent ;
à droite : calc(50% - 1px);
-webkit-transform-origin : en haut à droite ;
transform-origin : en haut à droite ;
-webkit-transform : rotation (10 deg);
transformation : rotation (10 deg);
}
.cat-mouth:après {
border-right-color : transparent ;
à gauche : calc(50% - 1px);
-webkit-transform-origin : en haut à gauche ;
transform-origin : en haut à gauche ;
-webkit-transform : rotation (-10 deg);
transformation : rotation (-10 deg);
}
.chat-moustaches {
largeur : 50% ;
hauteur : 8px ;
position : absolue ;
bas : 25 % ;
gauche : 25% ;
-webkit-transform-style : préserver-3d ;
style de transformation : préserver-3d ;
-webkit-perspective : 60px ;
perspective : 60 px ;
}
.cat-moustaches : avant, .cat-moustaches : après {
position : absolue ;
hauteur : 100% ;
largeur : 30% ;
bordure : 2px solide #9FA2CB ;
bordure gauche : aucune ;
frontière droite : aucune ;
}
.cat-moustaches : avant {
à droite : 100 % ;
-webkit-transform-origin : centre droit ;
transformation-origine : centre droit ;
-webkit-transform : rotationY(70deg) rotationZ(-10deg);
transformation : rotationY(70deg) rotationZ(-10deg);
}
.cat-moustaches : après {
gauche : 100% ;
-webkit-transform-origin : centre gauche ;
transform-origin : centre gauche ;
-webkit-transform : rotationY(-70deg) rotationZ(10deg);
transformation : rotationY(-70deg) rotationZ(10deg);
}
@-webkit-keyframes bob {
0% {
-webkit-transform : translateY(0.4rem);
transformer : traduireY(0.4rem);
}
6,25% {
-webkit-transform : traduireY(-0.4rem);
transformer : traduireY(-0.4rem);
}
12,5% {
-webkit-transform : translateY(0.4rem);
transformer : traduireY(0.4rem);
}
18,75% {
-webkit-transform : traduireY(-0.4rem);
transformer : traduireY(-0.4rem);
}
25% {
-webkit-transform : translateY(0.4rem);
transformer : traduireY(0.4rem);
}
31,25% {
-webkit-transform : traduireY(-0.4rem);
transformer : traduireY(-0.4rem);
}
37,5% {
-webkit-transform : translateY(0.4rem);
transformer : traduireY(0.4rem);
}
43,75% {
-webkit-transform : traduireY(-0.4rem);
transformer : traduireY(-0.4rem);
}
50 % {
-webkit-transform : translateY(0.4rem);
transformer : traduireY(0.4rem);
}
56,25% {
-webkit-transform : traduireY(-0.4rem);
transformer : traduireY(-0.4rem);
}
62,5% {
-webkit-transform : translateY(0.4rem);
transformer : traduireY(0.4rem);
}
68,75% {
-webkit-transform : traduireY(-0.4rem);
transformer : traduireY(-0.4rem);
}
75 % {
-webkit-transform : translateY(0.4rem);
transformer : traduireY(0.4rem);
}
81,25% {
-webkit-transform : traduireY(-0.4rem);
transformer : traduireY(-0.4rem);
}
87,5% {
-webkit-transform : translateY(0.4rem);
transformer : traduireY(0.4rem);
}
93,75% {
-webkit-transform : traduireY(-0.4rem);
transformer : traduireY(-0.4rem);
}
100% {
-webkit-transform : translateY(0.4rem);
transformer : traduireY(0.4rem);
}
}
@keyframes bob {
0% {
-webkit-transform : translateY(0.4rem);
transformer : traduireY(0.4rem);
}
6,25% {
-webkit-transform : traduireY(-0.4rem);
transformer : traduireY(-0.4rem);
}
12,5% {
-webkit-transform : translateY(0.4rem);
transformer : traduireY(0.4rem);
}
18,75% {
-webkit-transform : traduireY(-0.4rem);
transformer : traduireY(-0.4rem);
}
25% {
-webkit-transform : translateY(0.4rem);
transformer : traduireY(0.4rem);
}
31,25% {
-webkit-transform : traduireY(-0.4rem);
transformer : traduireY(-0.4rem);
}
37,5% {
-webkit-transform : translateY(0.4rem);
transformer : traduireY(0.4rem);
}
43,75% {
-webkit-transform : traduireY(-0.4rem);
transformer : traduireY(-0.4rem);
}
50 % {
-webkit-transform : translateY(0.4rem);
transformer : traduireY(0.4rem);
}
56,25% {
-webkit-transform : traduireY(-0.4rem);
transformer : traduireY(-0.4rem);
}
62,5% {
-webkit-transform : translateY(0.4rem);
transformer : traduireY(0.4rem);
}
68,75% {
-webkit-transform : traduireY(-0.4rem);
transformer : traduireY(-0.4rem);
}
75 % {
-webkit-transform : translateY(0.4rem);
transformer : traduireY(0.4rem);
}
81,25% {
-webkit-transform : traduireY(-0.4rem);
transformer : traduireY(-0.4rem);
}
87,5% {
-webkit-transform : translateY(0.4rem);
transformer : traduireY(0.4rem);
}
93,75% {
-webkit-transform : traduireY(-0.4rem);
transformer : traduireY(-0.4rem);
}
100% {
-webkit-transform : translateY(0.4rem);
transformer : traduireY(0.4rem);
}
}
@-webkit-keyframes swing {
0% {
-webkit-transform : rotation(5deg);
transformation : rotation (5 degrés);
}
12,5% {
-webkit-transform : rotation (-10 deg);
transformation : rotation (-10 deg);
}
25% {
-webkit-transform : rotation (10 deg);
transformation : rotation (10 deg);
}
37,5% {
-webkit-transform : rotation (-15 deg);
transformation : rotation (-15 deg);
}
50 % {
-webkit-transform : rotation(23deg);
transformation : rotation (23 deg);
}
62,5% {
-webkit-transform : rotation(-23deg);
transformation : rotation (-23 deg);
}
75 % {
-webkit-transform : rotation (15 deg);
transformation : rotation (15 deg);
}
87,5% {
-webkit-transform : rotation (-10 deg);
transformation : rotation (-10 deg);
}
100% {
-webkit-transform : rotation(5deg);
transformation : rotation (5 degrés);
}
}
@keyframes balance {
0% {
-webkit-transform : rotation(5deg);
transformation : rotation (5 degrés);
}
12,5% {
-webkit-transform : rotation (-10 deg);
transformation : rotation (-10 deg);
}
25% {
-webkit-transform : rotation (10 deg);
transformation : rotation (10 deg);
}
37,5% {
-webkit-transform : rotation (-15 deg);
transformation : rotation (-15 deg);
}
50 % {
-webkit-transform : rotation(23deg);
transformation : rotation (23 deg);
}
62,5% {
-webkit-transform : rotation(-23deg);
transformation : rotation (-23 deg);
}
75 % {
-webkit-transform : rotation (15 deg);
transformation : rotation (15 deg);
}
87,5% {
-webkit-transform : rotation (-10 deg);
transformation : rotation (-10 deg);
}
100% {
-webkit-transform : rotation(5deg);
transformation : rotation (5 degrés);
}
}
@-webkit-keyframes jambe pivotante {
0% {
-webkit-transform : rotation (0,5 deg);
transformation : rotation (0,5 deg);
}
12,5% {
-webkit-transform : rotation(-1deg);
transformation : rotation (-1deg);
}
25% {
-webkit-transform : rotation(1deg);
transformation : rotation (1deg);
}
37,5% {
-webkit-transform : rotation (-1,5 degrés);
transformation : rotation (-1,5 degrés);
}
50 % {
-webkit-transform : rotation (2,3 degrés);
transformation : rotation (2,3 degrés);
}
62,5% {
-webkit-transform : rotation (-2,3 degrés);
transformation : rotation (-2,3 degrés);
}
75 % {
-webkit-transform : rotation (1,5 deg);
transformation : rotation (1,5 deg);
}
87,5% {
-webkit-transform : rotation(-1deg);
transformation : rotation (-1deg);
}
100% {
-webkit-transform : rotation (0,5 deg);
transformation : rotation (0,5 deg);
}
}
@keyframes jambe pivotante {
0% {
-webkit-transform : rotation (0,5 deg);
transformation : rotation (0,5 deg);
}
12,5% {
-webkit-transform : rotation(-1deg);
transformation : rotation (-1deg);
}
25% {
-webkit-transform : rotation(1deg);
transformation : rotation (1deg);
}
37,5% {
-webkit-transform : rotation (-1,5 degrés);
transformation : rotation (-1,5 degrés);
}
50 % {
-webkit-transform : rotation (2,3 degrés);
transformation : rotation (2,3 degrés);
}
62,5% {
-webkit-transform : rotation (-2,3 degrés);
transformation : rotation (-2,3 degrés);
}
75 % {
-webkit-transform : rotation (1,5 deg);
transformation : rotation (1,5 deg);
}
87,5% {
-webkit-transform : rotation(-1deg);
transformation : rotation (-1deg);
}
100% {
-webkit-transform : rotation (0,5 deg);
transformation : rotation (0,5 deg);
}
}
@-webkit-keyframes swing-tail {
0% {
-webkit-transform : rotation(-2deg);
transformer : rotation(-2deg);
}
12,5% {
-webkit-transform : rotation(4deg);
transformation : rotation (4deg);
}
25% {
-webkit-transform : rotation(-4deg);
transformation : rotation (-4deg);
}
37,5% {
-webkit-transform : rotation(6deg);
transformation : rotation (6 degrés);
}
50 % {
-webkit-transform : rotation (-9,2 deg);
transformation : rotation (-9,2 deg);
}
62,5% {
-webkit-transform : rotation (9,2 degrés);
transformation : rotation (9,2 degrés);
}
75 % {
-webkit-transform : rotation(-6deg);
transformation : rotation (-6 deg);
}
87,5% {
-webkit-transform : rotation(4deg);
transformation : rotation (4deg);
}
100% {
-webkit-transform : rotation(-2deg);
transformer : rotation(-2deg);
}
}
@keyframes swing-tail {
0% {
-webkit-transform : rotation(-2deg);
transformer : rotation(-2deg);
}
12,5% {
-webkit-transform : rotation(4deg);
transformation : rotation (4deg);
}
25% {
-webkit-transform : rotation(-4deg);
transformation : rotation (-4deg);
}
37,5% {
-webkit-transform : rotation(6deg);
transformation : rotation (6 degrés);
}
50 % {
-webkit-transform : rotation (-9,2 degrés);
transformation : rotation (-9,2 deg);
}
62,5% {
-webkit-transform : rotation (9,2 degrés);
transformation : rotation (9,2 degrés);
}
75 % {
-webkit-transform : rotation(-6deg);
transformation : rotation (-6 deg);
}
87,5% {
-webkit-transform : rotation(4deg);
transformation : rotation (4deg);
}
100% {
-webkit-transform : rotation(-2deg);
transformer : rotation(-2deg);
}
}
@-webkit-keyframes reverse-swing {
0% {
-webkit-transform : rotation(-5deg);
transformation : rotation (-5 deg);
}
12,5% {
-webkit-transform : rotation (10 deg);
transformation : rotation (10 deg);
}
25% {
-webkit-transform : rotation (-10 deg);
transformation : rotation (-10 deg);
}
37,5% {
-webkit-transform : rotation (15 deg);
transformation : rotation (15 deg);
}
50 % {
-webkit-transform : rotation(-23deg);
transformation : rotation (-23 deg);
}
62,5% {
-webkit-transform : rotation(23deg);
transformation : rotation (23 deg);
}
75 % {
-webkit-transform : rotation (-15 deg);
transformation : rotation (-15 deg);
}
87,5% {
-webkit-transform : rotation (10 deg);
transformation : rotation (10 deg);
}
100% {
-webkit-transform : rotation(-5deg);
transformation : rotation (-5 deg);
}
}
@keyframes reverse-swing {
0% {
-webkit-transform : rotation(-5deg);
transformation : rotation (-5 deg);
}
12,5% {
-webkit-transform : rotation (10 deg);
transformation : rotation (10 deg);
}
25% {
-webkit-transform : rotation (-10 deg);
transformation : rotation (-10 deg);
}
37,5% {
-webkit-transform : rotation (15 deg);
transformation : rotation (15 deg);
}
50 % {
-webkit-transform : rotation(-23deg);
transformation : rotation (-23 deg);
}
62,5% {
-webkit-transform : rotation(23deg);
transformation : rotation (23 deg);
}
75 % {
-webkit-transform : rotation (-15 deg);
transformation : rotation (-15 deg);
}
87,5% {
-webkit-transform : rotation (10 deg);
transformation : rotation (10 deg);
}
100% {
-webkit-transform : rotation(-5deg);
transformation : rotation (-5 deg);
}
}
@-webkit-keyframes visage {
0% {
-webkit-transform : translateX(-2.5px);
transformer : traduireX(-2,5px);
}
12,5% {
-webkit-transform : translateX(5px);
transformer : translateX(5px);
}
25% {
-webkit-transform : translateX(-5px);
transformer : traduireX(-5px);
}
37,5% {
-webkit-transform : translateX(7.5px);
transformer : translateX(7.5px);
}
50 % {
-webkit-transform : translateX(-11.5px);
transformer : traduireX(-11,5px);
}
62,5% {
-webkit-transform : translateX(11.5px);
transformer : translateX(11.5px);
}
75 % {
-webkit-transform : translateX(-7.5px);
transformer : traduireX(-7,5px);
}
87,5% {
-webkit-transform : translateX(5px);
transformer : translateX(5px);
}
100% {
-webkit-transform : translateX(-2.5px);
transformer : traduireX(-2,5px);
}
}
@keyframes visage {
0% {
-webkit-transform : translateX(-2.5px);
transformer : traduireX(-2,5px);
}
12,5% {
-webkit-transform : translateX(5px);
transformer : translateX(5px);
}
25% {
-webkit-transform : translateX(-5px);
transformer : traduireX(-5px);
}
37,5% {
-webkit-transform : translateX(7.5px);
transformer : translateX(7.5px);
}
50 % {
-webkit-transform : translateX(-11.5px);
transformer : traduireX(-11,5px);
}
62,5% {
-webkit-transform : translateX(11.5px);
transformer : translateX(11.5px);
}
75 % {
-webkit-transform : translateX(-7.5px);
transformer : traduireX(-7,5px);
}
87,5% {
-webkit-transform : translateX(5px);
transformer : translateX(5px);
}
100% {
-webkit-transform : translateX(-2.5px);
transformer : traduireX(-2,5px);
}
}
@-webkit-keyframes fondu en entrée {
de {
opacité : 0;
}
à {
opacité : 1;
}
}
@keyframes fondu en entrée {
de {
opacité : 0;
}
à {
opacité : 1;
}
}
@-webkit-keyframes clignotent {
de, à, 10 %, 25 %, 80 % {
-webkit-transform : scaleY(1);
transformation : scaleY(1);
}
8 %, 23 %, 78 % {
-webkit-transform : scaleY(0.1);
transformation : scaleY(0.1);
}
}
@keyframes clignotent {
de, à, 10 %, 25 %, 80 % {
-webkit-transform : scaleY(1);
transformation : scaleY(1);
}
8 %, 23 %, 78 % {
-webkit-transform : scaleY(0.1);
transformation : scaleY(0.1);
}
}
corps, html {
hauteur : 100% ;
largeur : 100 % ;
marge : 0;
remplissage : 0 ;
couleur d'arrière-plan : #1F1F3C ;
débordement : caché ;
}
*, *:avant, *:après {
dimensionnement de la boîte : border-box ;
position : relative ;
-webkit-animation-timing-function : cubique-bézier(0.5, 0, 0.5, 1);
fonction de synchronisation d'animation : cubique-bézier (0,5, 0, 0,5, 1);
-webkit-animation-fill-mode : les deux ;
animation-fill-mode : les deux ;
}
*:avant, *:après {
contenu : '';
affichage : bloc ;
}