919 lines
14 KiB
CSS
919 lines
14 KiB
CSS
/* POLICES */
|
|
@font-face {
|
|
font-family: "Poppins";
|
|
src: url("/Y/Poppins-Light.ttf") format("truetype");
|
|
}
|
|
|
|
/* règles generéales */
|
|
* {
|
|
margin: 0px;
|
|
padding: 0px;
|
|
box-sizing: border-box;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
/* styles sur html et body pour faire un fond 'polygon' changeant */
|
|
html {
|
|
background: #051937;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
body {
|
|
min-height: 100vh;
|
|
position: relative;
|
|
}
|
|
|
|
body:after,
|
|
body:before {
|
|
-webkit-clip-path: polygon(
|
|
100% 0,
|
|
0 0,
|
|
0 77.5%,
|
|
1% 77.4%,
|
|
2% 77.1%,
|
|
3% 76.6%,
|
|
4% 75.9%,
|
|
5% 75.05%,
|
|
6% 74.05%,
|
|
7% 72.95%,
|
|
8% 71.75%,
|
|
9% 70.55%,
|
|
10% 69.3%,
|
|
11% 68.05%,
|
|
12% 66.9%,
|
|
13% 65.8%,
|
|
14% 64.8%,
|
|
15% 64%,
|
|
16% 63.35%,
|
|
17% 62.85%,
|
|
18% 62.6%,
|
|
19% 62.5%,
|
|
20% 62.65%,
|
|
21% 63%,
|
|
22% 63.5%,
|
|
23% 64.2%,
|
|
24% 65.1%,
|
|
25% 66.1%,
|
|
26% 67.2%,
|
|
27% 68.4%,
|
|
28% 69.65%,
|
|
29% 70.9%,
|
|
30% 72.15%,
|
|
31% 73.3%,
|
|
32% 74.35%,
|
|
33% 75.3%,
|
|
34% 76.1%,
|
|
35% 76.75%,
|
|
36% 77.2%,
|
|
37% 77.45%,
|
|
38% 77.5%,
|
|
39% 77.3%,
|
|
40% 76.95%,
|
|
41% 76.4%,
|
|
42% 75.65%,
|
|
43% 74.75%,
|
|
44% 73.75%,
|
|
45% 72.6%,
|
|
46% 71.4%,
|
|
47% 70.15%,
|
|
48% 68.9%,
|
|
49% 67.7%,
|
|
50% 66.55%,
|
|
51% 65.5%,
|
|
52% 64.55%,
|
|
53% 63.75%,
|
|
54% 63.15%,
|
|
55% 62.75%,
|
|
56% 62.55%,
|
|
57% 62.5%,
|
|
58% 62.7%,
|
|
59% 63.1%,
|
|
60% 63.7%,
|
|
61% 64.45%,
|
|
62% 65.4%,
|
|
63% 66.45%,
|
|
64% 67.6%,
|
|
65% 68.8%,
|
|
66% 70.05%,
|
|
67% 71.3%,
|
|
68% 72.5%,
|
|
69% 73.6%,
|
|
70% 74.65%,
|
|
71% 75.55%,
|
|
72% 76.35%,
|
|
73% 76.9%,
|
|
74% 77.3%,
|
|
75% 77.5%,
|
|
76% 77.45%,
|
|
77% 77.25%,
|
|
78% 76.8%,
|
|
79% 76.2%,
|
|
80% 75.4%,
|
|
81% 74.45%,
|
|
82% 73.4%,
|
|
83% 72.25%,
|
|
84% 71.05%,
|
|
85% 69.8%,
|
|
86% 68.55%,
|
|
87% 67.35%,
|
|
88% 66.2%,
|
|
89% 65.2%,
|
|
90% 64.3%,
|
|
91% 63.55%,
|
|
92% 63%,
|
|
93% 62.65%,
|
|
94% 62.5%,
|
|
95% 62.55%,
|
|
96% 62.8%,
|
|
97% 63.3%,
|
|
98% 63.9%,
|
|
99% 64.75%,
|
|
100% 65.7%
|
|
);
|
|
clip-path: polygon(
|
|
100% 0,
|
|
0 0,
|
|
0 77.5%,
|
|
1% 77.4%,
|
|
2% 77.1%,
|
|
3% 76.6%,
|
|
4% 75.9%,
|
|
5% 75.05%,
|
|
6% 74.05%,
|
|
7% 72.95%,
|
|
8% 71.75%,
|
|
9% 70.55%,
|
|
10% 69.3%,
|
|
11% 68.05%,
|
|
12% 66.9%,
|
|
13% 65.8%,
|
|
14% 64.8%,
|
|
15% 64%,
|
|
16% 63.35%,
|
|
17% 62.85%,
|
|
18% 62.6%,
|
|
19% 62.5%,
|
|
20% 62.65%,
|
|
21% 63%,
|
|
22% 63.5%,
|
|
23% 64.2%,
|
|
24% 65.1%,
|
|
25% 66.1%,
|
|
26% 67.2%,
|
|
27% 68.4%,
|
|
28% 69.65%,
|
|
29% 70.9%,
|
|
30% 72.15%,
|
|
31% 73.3%,
|
|
32% 74.35%,
|
|
33% 75.3%,
|
|
34% 76.1%,
|
|
35% 76.75%,
|
|
36% 77.2%,
|
|
37% 77.45%,
|
|
38% 77.5%,
|
|
39% 77.3%,
|
|
40% 76.95%,
|
|
41% 76.4%,
|
|
42% 75.65%,
|
|
43% 74.75%,
|
|
44% 73.75%,
|
|
45% 72.6%,
|
|
46% 71.4%,
|
|
47% 70.15%,
|
|
48% 68.9%,
|
|
49% 67.7%,
|
|
50% 66.55%,
|
|
51% 65.5%,
|
|
52% 64.55%,
|
|
53% 63.75%,
|
|
54% 63.15%,
|
|
55% 62.75%,
|
|
56% 62.55%,
|
|
57% 62.5%,
|
|
58% 62.7%,
|
|
59% 63.1%,
|
|
60% 63.7%,
|
|
61% 64.45%,
|
|
62% 65.4%,
|
|
63% 66.45%,
|
|
64% 67.6%,
|
|
65% 68.8%,
|
|
66% 70.05%,
|
|
67% 71.3%,
|
|
68% 72.5%,
|
|
69% 73.6%,
|
|
70% 74.65%,
|
|
71% 75.55%,
|
|
72% 76.35%,
|
|
73% 76.9%,
|
|
74% 77.3%,
|
|
75% 77.5%,
|
|
76% 77.45%,
|
|
77% 77.25%,
|
|
78% 76.8%,
|
|
79% 76.2%,
|
|
80% 75.4%,
|
|
81% 74.45%,
|
|
82% 73.4%,
|
|
83% 72.25%,
|
|
84% 71.05%,
|
|
85% 69.8%,
|
|
86% 68.55%,
|
|
87% 67.35%,
|
|
88% 66.2%,
|
|
89% 65.2%,
|
|
90% 64.3%,
|
|
91% 63.55%,
|
|
92% 63%,
|
|
93% 62.65%,
|
|
94% 62.5%,
|
|
95% 62.55%,
|
|
96% 62.8%,
|
|
97% 63.3%,
|
|
98% 63.9%,
|
|
99% 64.75%,
|
|
100% 65.7%
|
|
);
|
|
display: block;
|
|
height: 200px;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
body:after {
|
|
content: "";
|
|
background: linear-gradient(120deg, #113e9e, #b30082, #d31835);
|
|
background-size: 200% 300%;
|
|
opacity: 0.6;
|
|
-webkit-animation: bgMove 15s ease infinite;
|
|
-moz-animation: bgMove 15s ease infinite;
|
|
animation: bgMove 15s ease infinite;
|
|
}
|
|
|
|
body:before {
|
|
height: 650px;
|
|
margin-top: -250px;
|
|
background: rgba(189, 189, 189, 0.1);
|
|
content: "";
|
|
}
|
|
|
|
.header {
|
|
position: relative;
|
|
z-index: 2;
|
|
padding: 40px 40px 60px 3vw;
|
|
height: 150px;
|
|
}
|
|
|
|
.header h1 {
|
|
color: white;
|
|
margin-left: 10px;
|
|
padding-bottom: 10px;
|
|
font-weight: lighter;
|
|
display: inline;
|
|
}
|
|
|
|
/* La taille est au minimum 100%, auxquels on retire la hauteur du footer */
|
|
main {
|
|
min-height: calc(100vh - 420px);
|
|
margin-bottom: 100px;
|
|
display: block;
|
|
}
|
|
|
|
.yfold:not(.card):not(aside) {
|
|
background: rgba(189, 189, 189, 0.2);
|
|
position: relative;
|
|
z-index: 1;
|
|
margin: 20px;
|
|
margin-left: 3vw;
|
|
margin-right: 3vw;
|
|
border-radius: 12px;
|
|
max-width: 900px;
|
|
color: black;
|
|
}
|
|
|
|
/* couleurs modulo 3 */
|
|
.yfold:not(.card):nth-of-type(3n) {
|
|
background: rgba(250, 100, 100, 0.2);
|
|
}
|
|
|
|
.yfold:not(.card):nth-of-type(3n-1) {
|
|
background: rgba(100, 100, 250, 0.2);
|
|
}
|
|
|
|
.yfold:not(.card):nth-of-type(3n-2) {
|
|
background: rgba(180, 250, 100, 0.2);
|
|
}
|
|
|
|
.yfold-title {
|
|
padding: 10px 12px 5px 15px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
h1.yfold-title,
|
|
h2.yfold-title {
|
|
color: white;
|
|
}
|
|
|
|
div.warning {
|
|
background-color: yellow;
|
|
padding: 15px;
|
|
border-radius: 12px;
|
|
min-height: 70px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 60%;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.file {
|
|
font-family: sans;
|
|
font-size: 96%;
|
|
color: #660033;
|
|
}
|
|
|
|
div.warning:before {
|
|
content: url(Images/important.png);
|
|
float: left;
|
|
margin-right: 12px;
|
|
}
|
|
|
|
.arrow {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.menu {
|
|
margin: 0.25ex 0;
|
|
padding: 0.1ex 0.75ex 0.1ex 0.75ex;
|
|
background: rgba(130, 170, 250, 0.5);
|
|
border: thin solid #37f;
|
|
border-radius: 4px;
|
|
box-shadow: 3px 3px 2px #844;
|
|
font-family: sans;
|
|
font-variant: small-caps;
|
|
font-size: 88%;
|
|
display: inline-block;
|
|
}
|
|
|
|
.lbutton {
|
|
vertical-align: top;
|
|
padding: 2px 5px;
|
|
color: black;
|
|
border-radius: 6px;
|
|
box-shadow: 1px 2px 2px grey;
|
|
font-size: 90%;
|
|
background: #72e0d1;
|
|
}
|
|
|
|
.nice-inline {
|
|
vertical-align: top;
|
|
max-height: 5ex;
|
|
}
|
|
|
|
/* le fond d'écran d'opacité 0.8 permet d'attraper un peu de la couleur de l'élément parent */
|
|
.yfold-content {
|
|
background: rgba(240, 240, 240, 0.8);
|
|
position: relative;
|
|
z-index: 2;
|
|
border-radius: 12px;
|
|
padding: 40px min(40px, 3vw);
|
|
overflow: hidden;
|
|
}
|
|
|
|
aside.yfold {
|
|
margin: 20px 0;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
aside .yfold-title,
|
|
.card .yfold-title {
|
|
color: black;
|
|
font-family: "Poppins", sans-serif;
|
|
font-weight: 100;
|
|
padding: 0px;
|
|
}
|
|
|
|
aside .yfold-content,
|
|
.card .yfold-content {
|
|
padding: min(40px, 3vw);
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3 {
|
|
font-family: "Poppins", sans-serif;
|
|
font-weight: lighter;
|
|
}
|
|
|
|
h4,
|
|
h5 {
|
|
font-size: 110%;
|
|
margin-bottom: 5px;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
/* Elements qui s'animent, se plient et se déplient */
|
|
.anim-hide,
|
|
aside .anim-hide {
|
|
padding-top: 0 !important;
|
|
padding-bottom: 0 !important;
|
|
animation-name: disappear;
|
|
animation-duration: 0.75s;
|
|
max-height: 0;
|
|
margin: 0;
|
|
transition: padding 0.75s ease 0.3s;
|
|
}
|
|
|
|
.hidden {
|
|
padding-top: 0 !important;
|
|
padding-bottom: 0;
|
|
max-height: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.anim-show {
|
|
animation-name: appear;
|
|
animation-duration: 0.75s;
|
|
max-height: initial;
|
|
margin: 0 0 3ex 0;
|
|
transition: padding 0.75s ease 0.1s;
|
|
}
|
|
|
|
/* style des éléments a l'intérieur des cartes */
|
|
.steps {
|
|
list-style: none;
|
|
}
|
|
|
|
.advice {
|
|
margin: 3vw;
|
|
max-width: 600px;
|
|
background: #ade;
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
}
|
|
|
|
.ascii {
|
|
font-size: 60%;
|
|
display: inline-block;
|
|
margin: 0 25px 20px 0;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
footer {
|
|
bottom: 0px;
|
|
width: 100%;
|
|
min-height: 150px;
|
|
background: rgba(19, 19, 19, 0.8);
|
|
padding: 30px 50px;
|
|
display: flex;
|
|
z-index: 2;
|
|
flex-direction: row;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
footer * {
|
|
margin: 8px;
|
|
filter: invert();
|
|
}
|
|
|
|
footer a {
|
|
filter: invert(1);
|
|
}
|
|
|
|
footer a img {
|
|
filter: hue-rotate(180deg);
|
|
height: 50px;
|
|
}
|
|
|
|
footer .pcom a {
|
|
color: rgb(150, 150, 250);
|
|
text-decoration: none;
|
|
font-size: 150%;
|
|
}
|
|
|
|
/* PAGE DE CODE */
|
|
code {
|
|
background: rgba(19, 19, 19, 0.8);
|
|
font-family: monospace;
|
|
color: #ffffcc;
|
|
display: inline;
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
font-size: 90%;
|
|
font-style: normal;
|
|
}
|
|
|
|
.output,
|
|
samp {
|
|
display: block;
|
|
background: rgba(19, 19, 19, 0.8);
|
|
margin: 20px 0;
|
|
font-family: monospace;
|
|
color: #ccffcc;
|
|
border-radius: 12px;
|
|
tab-size: 2;
|
|
white-space: pre;
|
|
width: 80%;
|
|
display: block;
|
|
overflow-x: scroll;
|
|
font-size: 120%;
|
|
padding: 20px 50px 22px 25px;
|
|
border-left: 10px solid #494;
|
|
line-height: 1.55;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
code.block {
|
|
border-radius: 12px;
|
|
tab-size: 2;
|
|
white-space: pre;
|
|
display: block;
|
|
overflow-x: scroll;
|
|
font-size: 120%;
|
|
padding: 20px 50px 22px 25px;
|
|
border-left: 10px solid #944;
|
|
line-height: 1.55;
|
|
transition: all 0.3s;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
code.page {
|
|
border-radius: 12px;
|
|
position: relative;
|
|
z-index: 2;
|
|
background: rgba(19, 19, 19, 0.8);
|
|
width: min(94vw, 900px);
|
|
border-radius: 12px;
|
|
margin-left: 3vw;
|
|
margin-top: 20px;
|
|
font-family: monospace;
|
|
display: block;
|
|
color: #ffffcc;
|
|
tab-size: 2;
|
|
white-space: pre;
|
|
overflow-x: scroll;
|
|
font-size: 120%;
|
|
padding: 20px 50px 22px 25px;
|
|
border-left: 10px solid #884;
|
|
line-height: 1.55;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
code * {
|
|
white-space: pre;
|
|
tab-size: 2px;
|
|
display: inline;
|
|
}
|
|
|
|
code.kw {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
section.card {
|
|
background: rgba(189, 189, 189, 0.2);
|
|
position: relative;
|
|
z-index: 1;
|
|
margin: 20px;
|
|
margin-left: 3vw;
|
|
margin-right: 3vw;
|
|
border-radius: 12px;
|
|
max-width: 900px;
|
|
color: white;
|
|
padding: 20px;
|
|
}
|
|
|
|
section.card h2 {
|
|
margin-bottom: 20px;
|
|
border-bottom: 1px solid gray;
|
|
}
|
|
|
|
section.card img {
|
|
max-width: 800px;
|
|
}
|
|
|
|
section.card .file {
|
|
filter: brightness(200%);
|
|
}
|
|
|
|
mark {
|
|
border-radius: 5px;
|
|
padding: 1px 5px;
|
|
}
|
|
|
|
code div {
|
|
overflow: hidden;
|
|
position: absolute;
|
|
top: 12px;
|
|
right: 12px;
|
|
padding: 6px;
|
|
border-radius: 8px;
|
|
height: 42px;
|
|
width: 42px;
|
|
background: #333;
|
|
cursor: pointer;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
code div.theme {
|
|
right: 62px;
|
|
}
|
|
|
|
code div svg {
|
|
height: 30px;
|
|
width: 30px;
|
|
filter: invert(1);
|
|
}
|
|
|
|
code div.valid {
|
|
background: #181;
|
|
}
|
|
|
|
code div.not-valid {
|
|
background: #811;
|
|
}
|
|
|
|
code div.valid,
|
|
code div.not-valid,
|
|
code div.darken {
|
|
animation-name: shake;
|
|
animation-duration: 0.6s;
|
|
}
|
|
|
|
span.comment {
|
|
font-style: italic;
|
|
color: rgb(128, 139, 150);
|
|
white-space: pre;
|
|
}
|
|
|
|
span.kw {
|
|
color: rgb(203, 128, 53);
|
|
}
|
|
|
|
span.type {
|
|
color: rgb(203, 203, 53);
|
|
}
|
|
|
|
span.fname {
|
|
color: #72e0d1;
|
|
}
|
|
|
|
span.string {
|
|
color: rgb(53, 203, 128);
|
|
}
|
|
|
|
span.letvar {
|
|
color: rgb(128, 203, 53);
|
|
}
|
|
|
|
span.uident {
|
|
color: rgb(203, 203, 53);
|
|
}
|
|
|
|
code:not(.inline).light {
|
|
background: rgba(250, 250, 250, 0.8);
|
|
color: black;
|
|
border-color: #aaa;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.light div {
|
|
background: #aaa;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
code * {
|
|
white-space: pre;
|
|
tab-size: 2px;
|
|
display: inline;
|
|
}
|
|
|
|
.light span.comment {
|
|
font-style: italic;
|
|
color: #555;
|
|
white-space: pre;
|
|
}
|
|
|
|
.light span.kw {
|
|
color: rgb(138, 74, 10);
|
|
}
|
|
|
|
.light span.type {
|
|
color: rgb(138, 74, 10);
|
|
}
|
|
|
|
.light span.fname {
|
|
color: rgb(138, 138, 10);
|
|
}
|
|
|
|
.light span.string {
|
|
color: rgb(10, 138, 74);
|
|
}
|
|
|
|
.light span.letvar {
|
|
color: rgb(74, 138, 10);
|
|
}
|
|
|
|
.light span.uident {
|
|
color: rgb(138, 138, 10);
|
|
}
|
|
|
|
span.file {
|
|
font-weight: bold;
|
|
}
|
|
|
|
pre {
|
|
margin: 20px 0;
|
|
}
|
|
|
|
span.lbutton {
|
|
position: relative;
|
|
margin-right: 6px;
|
|
}
|
|
|
|
img.space {
|
|
margin: 25px auto;
|
|
border-radius: 12px;
|
|
box-shadow: black 2px 2px 5px;
|
|
display: block;
|
|
}
|
|
|
|
img.float {
|
|
margin: 15px auto;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
img[src*="png"] {
|
|
border: none;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
img:hover {
|
|
transform: scale(1.05);
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
/* Inside section styles */
|
|
.yfold-content h3 {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.yfold-content .exercise {
|
|
float: left;
|
|
max-width: 60%;
|
|
}
|
|
|
|
.yfold-content aside {
|
|
float: right;
|
|
max-width: 35%;
|
|
margin-left: 5%;
|
|
background: #ffedca;
|
|
padding: 7px;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
ul li,
|
|
ol li {
|
|
list-style: circle;
|
|
margin-left: 25px;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
li:last-child {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.difficulty {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
small {
|
|
font-size: inherit;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.yfold-content p {
|
|
margin: 12px 0 20px 0;
|
|
}
|
|
|
|
/* General styling */
|
|
|
|
::selection {
|
|
background-color: #113e9e;
|
|
color: lightgoldenrodyellow;
|
|
}
|
|
|
|
/* MEDIA */
|
|
@media (min-width: 1400px) {
|
|
footer {
|
|
flex-direction: column;
|
|
max-height: 400px;
|
|
position: absolute;
|
|
top: calc(20px + 150px);
|
|
right: 3vw;
|
|
width: calc(91vw - 900px);
|
|
border-radius: 12px;
|
|
}
|
|
}
|
|
|
|
/* ANIMATION */
|
|
@-webkit-keyframes bgMove {
|
|
0% {
|
|
background-position: 0% 50%;
|
|
}
|
|
|
|
50% {
|
|
background-position: 100% 50%;
|
|
}
|
|
|
|
100% {
|
|
background-position: 0% 50%;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes bgMove {
|
|
0% {
|
|
background-position: 0% 50%;
|
|
}
|
|
|
|
50% {
|
|
background-position: 100% 50%;
|
|
}
|
|
|
|
100% {
|
|
background-position: 0% 50%;
|
|
}
|
|
}
|
|
|
|
@keyframes bgMove {
|
|
0% {
|
|
background-position: 0% 50%;
|
|
}
|
|
|
|
50% {
|
|
background-position: 100% 50%;
|
|
}
|
|
|
|
100% {
|
|
background-position: 0% 50%;
|
|
}
|
|
}
|
|
|
|
@keyframes appear {
|
|
0% {
|
|
max-height: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
100% {
|
|
max-height: 500px;
|
|
margin-bottom: 3ex;
|
|
}
|
|
}
|
|
|
|
@keyframes disappear {
|
|
0% {
|
|
max-height: 500px;
|
|
margin-bottom: 3ex;
|
|
}
|
|
|
|
100% {
|
|
max-height: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes shake {
|
|
0% {
|
|
transform: translateX(0%);
|
|
}
|
|
|
|
20% {
|
|
transform: translateX(-5%);
|
|
}
|
|
|
|
40% {
|
|
transform: translateX(15%);
|
|
}
|
|
|
|
60% {
|
|
transform: translateX(-15%);
|
|
}
|
|
|
|
80% {
|
|
transform: translateX(5%);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0%);
|
|
}
|
|
}
|