圆点过渡切换动画效果
代码语言：html
所属分类：动画
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
@import url("https://fonts.googleapis.com/css?family=Josefin+Sans:700&display=swap");
.main {
align-items: center;
background: #ffedcc;
display: flex;
font-family: "Josefin+Sans", sans-serif;
justify-content: center;
height: 100vh;
line-height: 40px;
margin: 0;
}
.contenedor {
align-items: center;
display: flex;
flex-direction: column;
height: 600px;
overflow: hidden;
position: absolute;
width: 320px;
}
.imagen {
background: #22274d;
height: 240px;
margin-top: 72px;
width: 240px;
}
.texto {
color: #126c20;
font-size: 30px;
font-weight: bold;
margin: 20px 20px 0;
text-align: center;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.primero {
background: #f2bb29;
border-radius: 25px;
border: 8px solid white;
height: 600px;
position: absolute;
width: 320px;
}
.segundo {
background: #126c20;
border-radius: 25px;
-webkit-clip-path: polygon(
56.25% 84.37484%,
56.21773% 84.71565%,
56.12302% 85.04662%,
55.96901% 85.36606%,
55.75884% 85.67231%,
55.49566% 85.96368%,
55.1826% 86.23851%,
54.8228% 86.49512%,
54.41942% 86.73183%,
53.97558% 86.94697%,
53.49443% 87.13885%,
52.97912% 87.30582%,
52.43278% 87.44618%,
51.85856% 87.55827%,
51.25959% 87.6404%,
50.63902% 87.69092%,
50% 87.70812%,
49.36097% 87.69092%,
48.74041% 87.6404%,
48.14144% 87.55827%,
47.56722% 87.44618%,
47.02088% 87.30582%,
46.50557% 87.13885%,
46.02442% 86.94697%,
45.58058% 86.73183%,
45.1772% 86.49512%,
44.8174% 86.23851%,
44.50434% 85.96368%,
44.24116% 85.67231%,
44.03099% 85.36606%,
43.87698% 85.04662%,
43.78227% 84.71565%,
43.75% 84.37484%,
43.78227% 84.03403%,
43.87698% 83.70307%,
44.03099% 83.38363%,
44.24116% 83.07738%,
44.50434% 82.786%,
44.8174% 82.51117%,
45.1772% 82.25457%,
45.58058% 82.01786%,
46.02442% 81.80272%,
46.50557% 81.61083%,
47.02088% 81.44387%,
47.56722% 81.30351%,
48.14144% 81.19142%,
48.74041% 81.10928%,
49.36097% 81.05877%,
50% 81.04156%,
50.63902% 81.05877%,
51.25959% 81.10928%,
51.85856% 81.19142%,
52.43278% 81.30351%,
52.97912% 81.44387%,
53.49443% 81.61083%,
53.97558% 81.80272%,
54.41942% 82.01786%,
54.8228% 82.25457%,
55.1826% 82.51117%,
55.49566% 82.786%,
55.75884% 83.07738%,
55.96901% 83.38363%,
56.12302% 83.70307%,
56.21773% 84.03403%
);
clip-path: polygon(
56.25% 84.37484%,
56.21773% 84.71565%,
56.12302% 85.04662%,
55.96901% 85.36606%,
55.75884% 85.67231%,
55.49566% 85.96368%,
55.1826% 86.23851%,
54.8228% 86.49512%,
54.41942% 86.73183%,
53.97558% 86.94697%,
53.49443% 87.13885%,
52.97912% 87.30582%,
52.43278% 87.44618%,
51.85856% 87.55827%,
51.25959% 87.6404%,
50.63902% 87.69092%,
50% 87.70812%,
49.36097% 87.69092%,
48.74041% 87.6404%,
48.14144% 87.55827%,
47.56722% 87.44618%,
47.02088% 87.30582%,
46.50557% 87.13885%,
46.02442% 86.94697%,
45.58058% 86.73183%,
45.1772% 86.49512%,
44.8174% 86.23851%,
44.50434% 85.96368%,
44.24116% 85.67231%,
44.03099% 85.36606%,
43.87698% 85.04662%,
43.78227% 84.71565%,
43.75% 84.37484%,
43.78227% 84.03403%,
43.87698% 83.70307%,
44.03099% 83.38363%,
44.24116% 83.07738%,
44.50434% 82.786%,
44.8174% 82.51117%,
45.1772% 82.25457%,
45.58058% 82.01786%,
46.02442% 81.80272%,
46.50557% 81.61083%,
47.02088% 81.44387%,
47.56722% 81.30351%,
48.14144% 81.19142%,
48.74041% 81.10928%,
49.36097% 81.05877%,
50% 81.04156%,
50.63902% 81.05877%,
51.25959% 81.10928%,
51.85856% 81.19142%,
52.43278% 81.30351%,
52.97912% 81.44387%,
53.49443% 81.61083%,
53.97558% 81.80272%,
54.41942% 82.01786%,
54.8228% 82.25457%,
55.1826% 82.51117%,
55.49566% 82.786%,
55.75884% 83.07738%,
55.96901% 83.38363%,
56.12302% 83.70307%,
56.21773% 84.03403%
);
height: 600px;
position: absolute;
width: 320px;
}
.tercer {
background: #126c20;
border-radius: 21px;
-webkit-clip-path: polygon(
56.25% 84.37484%,
56.21773% 84.71565%,
56.12302% 85.04662%,
55.96901% 85.36606%,
55.75884% 85.67231%,
55.49566% 85.96368%,
55.1826% 86.23851%,
54.8228% 86.49512%,
54.41942% 86.73183%,
53.97558% 86.94697%,
53.49443% 87.13885%,
52.97912% 87.30582%,
52.43278% 87.44618%,
51.85856% 87.55827%,
51.25959% 87.6404%,
50.63902% 87.69092%,
50% 87.70812%,
49.36097% 87.69092%,
48.74041% 87.6404%,
48.14144% 87.55827%,
47.56722% 87.44618%,
47.02088% 87.30582%,
46.50557% 87.13885%,
46.02442% 86.94697%,
45.58058% 86.73183%,
45.1772% 86.49512%,
44.8174% 86.23851%,
44.50434% 85.96368%,
44.24116% 85.67231%,
44.03099% 85.36606%,
43.87698% 85.04662%,
43.78227% 84.71565%,
43.75% 84.37484%,
43.78227% 84.03403%,
43.87698% 83.70307%,
44.03099% 83.38363%,
44.24116% 83.07738%,
44.50434% 82.786%,
44.8174% 82.51117%,
45.1772% 82.25457%,
45.58058% 82.01786%,
46.02442% 81.80272%,
46.50557% 81.61083%,
47.02088% 81.44387%,
47.56722% 81.30351%,
48.14144% 81.19142%,
48.74041% 81.10928%,
49.36097% 81.05877%,
50% 81.04156%,
50.63902% 81.05877%,
51.25959% 81.10928%,
51.85856% 81.19142%,
52.43278% 81.30351%,
52.97912% 81.44387%,
53.49443% 81.61083%,
53.97558% 81.80272%,
54.41942% 82.01786%,
54.8228% 82.25457%,
55.1826% 82.51117%,
55.49566% 82.786%,
55.75884% 83.07738%,
55.96901% 83.38363%,
56.12302% 83.70307%,
56.21773% 84.03403%
);
clip-path: polygon(
56.25% 84.37484%,
56.21773% 84.71565%,
56.12302% 85.04662%,
55.96901% 85.36606%,
55.75884% 85.67231%,
55.49566% 85.96368%,
55.1826% 86.23851%,
54.8228% 86.49512%,
54.41942% 86.73183%,
53.97558% 86.94697%,
53.49443% 87.13885%,
52.97912% 87.30582%,
52.43278% 87.44618%,
51.85856% 87.55827%,
51.25959% 87.6404%,
50.63902% 87.69092%,
50% 87.70812%,
49.36097% 87.69092%,
48.74041% 87.6404%,
48.14144% 87.55827%,
47.56722% 87.44618%,
47.02088% 87.30582%,
46.50557% 87.13885%,
46.02442% 86.94697%,
45.58058% 86.73183%,
45.1772% 86.49512%,
44.8174% 86.23851%,
44.50434% 85.96368%,
44.24116% 85.67231%,
44.03099% 85.36606%,
43.87698% 85.04662%,
43.78227% 84.71565%,
43.75% 84.37484%,
43.78227% 84.03403%,
43.87698% 83.70307%,
44.03099% 83.38363%,
44.24116% 83.07738%,
44.50434% 82.786%,
44.8174% 82.51117%,
45.1772% 82.25457%,
45.58058% 82.01786%,
46.02442% 81.80272%,
46.50557% 81.61083%,
47.02088% 81.44387%,
47.56722% 81.30351%,
48.14144% 81.19142%,
48.74041% 81.10928%,
49.36097% 81.05877%,
50% 81.04156%,
50.63902% 81.05877%,
51.25959% 81.10928%,
51.85856% 81.19142%,
52.43278% 81.30351%,
52.97912% 81.44387%,
53.49443% 81.61083%,
53.97558% 81.80272%,
54.41942% 82.01786%,
54.8228% 82.25457%,
55.1826% 82.51117%,
55.49566% 82.786%,
55.75884% 83.07738%,
55.96901% 83.38363%,
56.12302% 83.70307%,
56.21773% 84.03403%
);
height: 600px;
position: absolute;
width: 320px;
}
.imagen1 {
-webkit-transform: translateX(0);
transform: translateX(0);
transition: -webkit-transform 500ms;
transition: transform 500ms;
transition: transform 500ms, -webkit-transform 500ms;
}
.imagen2 {
-webkit-transform: translateX(360px);
transform: translateX(360px);
}
.imagen3 {
-webkit-transform: translateX(360px);
transform: translateX(360px);
}
.texto1 {
-webkit-transform: translateX(0);
transform: translateX(0);
transition: -webkit-transform 500ms;
transition: transform 500ms;
transition: transform 500ms, -webkit-transform 500ms;
}
.texto2 {
color: #f2bb29;
-webkit-transform: translateX(360px);
transform: translateX(360px);
}
.texto3 {
color: #126c20;
-webkit-transform: translateX(360px);
transform: translateX(360px);
}
.primer-paso .imagen1 {
-webkit-transform: translateX(-360px);
transform: translateX(-360px);
}
.primer-paso .imagen2 {
-webkit-transform: translateX(0);
transform: translateX(0);
transition: -webkit-transform 500ms 500ms;
transition: transform 500ms 500ms;
transition: transform 500ms 500ms, -webkit-transform 500ms 500ms;
}
.primer-paso .imagen3 {
-webkit-transform: translateX(360px);
transform: translateX(360px);
}
.primer-paso .texto1 {
-webkit-transform: translateX(-360px);
transform: translateX(-360px);
transition: -webkit-transform 500ms;
transition: transform 500ms;
transition: transform 500ms, -webkit-transform 500ms;
}
.primer-paso .texto2 {
-webkit-transform: translateX(0);
transform: translateX(0);
transition: -webkit-transform 500ms 500ms;
transition: transform 500ms 500ms;
transition: transform 500ms 500ms, -webkit-transform 500ms 500ms;
}
.primer-paso .texto3 {
-webkit-transform: translateX(360px);
transform: translateX(360px);
}
.primer-paso .primero {
-webkit-animation: PrimerPasoPrimero 900ms 50ms both linear;
animation: PrimerPasoPrimero 900ms 50ms both linear;
}
.primer-paso .segundo {
-webkit-animation: PrimerPasoSegundo 900ms 50ms both linear;
animation: PrimerPasoSegundo 900ms 50ms both linear;
}
.primer-paso .tercer {
-webkit-animation: PrimerPasoTercer 900ms 50ms both linear;
animation: PrimerPasoTercer 900ms 50ms both linear;
}
.segundo-paso .imagen1 {
-webkit-transform: translateX(-360px);
transform: translateX(-360px);
}
.segundo-paso .imagen2 {
-webkit-transform: translateX(-360px);
transform: translateX(-360px);
transition: -webkit-transform 500ms;
transition: transform 500ms;
transition: transform 500ms, -webkit-transform 500ms;
}
.segundo-paso .imagen3 {
-webkit-transform: translateX(0);
transform: translateX(0);
transition: -webkit-transform 500ms 500ms;
transition: transform 500ms 500ms;
transition: transform 500ms 500ms, -webkit-transform 500ms 500ms;
}
.segundo-paso .texto1 {
-webkit-transform: translateX(-360px);
transform: translateX(-360px);
}
.segundo-paso .texto2 {
-webkit-transform: translateX(-360px);
transform: translateX(-360px);
transition: -webkit-transform 500ms;
transition: transform 500ms;
transition: transform 500ms, -webkit-transform 500ms;
}
.segundo-paso .texto3 {
-webkit-transform: translateX(0);
transform: translateX(0);
transition: -webkit-transform 500ms 500ms;
transition: transform 500ms 500ms;
transition: transform 500ms 500ms, -webkit-transform 500ms 500ms;
}
.segundo-paso .primero {
-webkit-animation: SegundoPasoPrimero 1s 50ms both linear;
animation: SegundoPasoPrimero 1s 50ms both linear;
}
.segundo-paso .segundo {
-webkit-animation: SegundoPasoSegundo 1s 50ms both linear;
animation: SegundoPasoSegundo 1s 50ms both linear;
}
.segundo-paso .tercer {
-webkit-animation: SegundoPasoTercer 1s 50ms both linear;
animation: SegundoPasoTercer 1s 50ms both linear;
}
/* Primero paso */
@-webkit-keyframes PrimerPasoPrimero {
0% {
background: #f2bb29;
}
40% {
background: #f2bb29;
}
40.01% {
background: #126c20;
}
100% {
background: #126c20;
}
}
@keyframes PrimerPasoPrimero {
0% {
background: #f2bb29;
}
40% {
background: #f2bb29;
}
40.01% {
background: #126c20;
}
100% {
background: #126c20;
}
}
@-webkit-keyframes PrimerPasoSegundo {
0% {
background: #126c20;
}
80% {
background: #126c20;
}
80.01% {
background: #f2bb29;
-webkit-clip-path: polygon(
43.75% 84.37484%,
43.78227% 84.71565%,
43.87698% 85.04662%,
44.03099% 85.36606%,
44.24116% 85.67231%,
44.50434% 85.96368%,
44.8174% 86.23851%,
45.1772% 86.49512%,
45.58058% 86.73183%,
46.02442% 86.94697%,
46.50557% 87.13885%,
47.02088% 87.30582%,
47.56722% 87.44618%,
48.14144% 87.55827%,
48.74041% 87.6404%,
49.36097% 87.69092%,
50% 87.70812%,
50.63902% 87.69092%,
51.25959% 87.6404%,
51.85856% 87.55827%,
52.43278% 87.44618%,
52.97912% 87.30582%,
53.49443% 87.13885%,
53.97558% 86.94697%,
54.41942% 86.73183%,
54.8228% 86.49512%,
55.1826% 86.23851%,
55.49566% 85.96368%,
55.75884% 85.67231%,
55.96901% 85.36606%,
56.12302% 85.04662%,
56.21773% 84.71565%,
56.25% 84.37484%,
56.21773% 84.03403%,
56.12302% 83.70307%,
55.96901% 83.38363%,
55.75884% 83.07738%,
55.49566% 82.786%,
55.1826% 82.51117%,
54.8228% 82.25457%,
54.41942% 82.01786%,
53.97558% 81.80272%,
53.49443% 81.61083%,
52.97912% 81.44387%,
52.43278% 81.30351%,
51.85856% 81.19142%,
51.25959% 81.10928%,
50.63902% 81.05877%,
50% 81.04156%,
49.36097% 81.05877%,
48.74041% 81.10928%,
48.14144% 81.19142%,
47.56722% 81.30351%,
47.02088% 81.44387%,
46.50557% 81.61083%,
46.02442% 81.80272%,
45.58058% 82.01786%,
45.1772% 82.25457%,
44.8174% 82.51117%,
44.50434% 82.786%,
44.24116% 83.07738%,
44.03099% 83.38363%,
43.87698% 83.70307%,
43.78227% 84.03403%
);
clip-path: polygon(
43.75% 84.37484%,
43.78227% 84.71565%,
43.87698% 85.04662%,
44.03099% 85.36606%,
44.24116% 85.67231%,
44.50434% 85.96368%,
44.8174% 86.23851%,
45.1772% 86.49512%,
45.58058% 86.73183%,
46.02442% 86.94697%,
46.50557% 87.13885%,
47.02088% 87.30582%,
47.56722% 87.44618%,
48.14144% 87.55827%,
48.74041% 87.6404%,
49.36097% 87.69092%,
50% 87.70812%,
50.63902% 87.69092%,
51.25959% 87.6404%,
51.85856% 87.55827%,
52.43278% 87.44618%,
52.97912% 87.30582%,
53.49443% 87.13885%,
53.97558% 86.94697%,
54.41942% 86.73183%,
54.8228% 86.49512%,
55.1826% 86.23851%,
55.49566% 85.96368%,
55.75884% 85.67231%,
55.96901% 85.36606%,
56.12302% 85.04662%,
56.21773% 84.71565%,
56.25% 84.37484%,
56.21773% 84.03403%,
56.12302% 83.70307%,
55.96901% 83.38363%,
55.75884% 83.07738%,
55.49566% 82.786%,
55.1826% 82.51117%,
54.8228% 82.25457%,
54.41942% 82.01786%,
53.97558% 81.80272%,
53.49443% 81.61083%,
52.97912% 81.44387%,
52.43278% 81.30351%,
51.85856% 81.19142%,
51.25959% 81.10928%,
50.63902% 81.05877%,
50% 81.04156%,
49.36097% 81.05877%,
48.74041% 81.10928%,
48.14144% 81.19142%,
47.56722% 81.30351%,
47.02088% 81.44387%,
46.50557% 81.61083%,
46.02442% 81.80272%,
45.58058% 82.01786%,
45.1772% 82.25457%,
44.8174% 82.51117%,
44.50434% 82.786%,
44.24116% 83.07738%,
44.03099% 83.38363%,
43.87698% 83.70307%,
43.78227% 84.03403%
);
}
100% {
background: #f2bb29;
-webkit-clip-path: polygon(
43.75% 84.37484%,
43.78227% 84.71565%,
43.87698% 85.04662%,
44.03099% 85.36606%,
44.24116% 85.67231%,
44.50434% 85.96368%,
44.8174% 86.23851%,
45.1772% 86.49512%,
45.58058% 86.73183%,
46.02442% 86.94697%,
46.50557% 87.13885%,
47.02088% 87.30582%,
47.56722% 87.44618%,
48.14144% 87.55827%,
48.74041% 87.6404%,
49.36097% 87.69092%,
50% 87.70812%,
50.63902% 87.69092%,
51.25959% 87.6404%,
51.85856% 87.55827%,
52.43278% 87.44618%,
52.97912% 87.30582%,
53.49443% 87.13885%,
53.97558% 86.94697%,
54.41942% 86.73183%,
54.8228% 86.49512%,
55.1826% 86.23851%,
55.49566% 85.96368%,
55.75884% 85.67231%,
55.96901% 85.36606%,
56.12302% 85.04662%,
56.21773% 84.71565%,
56.25% 84.37484%,
56.21773% 84.03403%,
56.12302% 83.70307%,
55.96901% 83.38363%,
55.75884% 83.07738%,
55.49566% 82.786%,
55.1826% 82.51117%,
54.8228% 82.25457%,
54.41942% 82.01786%,
53.97558% 81.80272%,
53.49443% 81.61083%,
52.97912% 81.44387%,
52.43278% 81.30351%,
51.85856% 81.19142%,
51.25959% 81.10928%,
50.63902% 81.05877%,
50% 81.04156%,
49.36097% 81.05877%,
48.74041% 81.10928%,
48.14144% 81.19142%,
47.56722% 81.30351%,
47.02088% 81.44387%,
46.50557% 81.61083%,
46.02442% 81.80272%,
45.58058% 82.01786%,
45.1772% 82.25457%,
44.8174% 82.51117%,
44.50434% 82.786%,
44.24116% 83.07738%,
44.03099% 83.38363%,
43.87698% 83.70307%,
43.78227% 84.03403%
);
clip-path: polygon(
43.75% 84.37484%,
43.78227% 84.71565%,
43.87698% 85.04662%,
44.03099% 85.36606%,
44.24116% 85.67231%,
44.50434% 85.96368%,
44.8174% 86.23851%,
45.1772% 86.49512%,
45.58058% 86.73183%,
46.02442% 86.94697%,
46.50557% 87.13885%,
47.02088% 87.30582%,
47.56722% 87.44618%,
48.14144% 87.55827%,
48.74041% 87.6404%,
49.36097% 87.69092%,
50% 87.70812%,
50.63902% 87.69092%,
51.25959% 87.6404%,
51.85856% 87.55827%,
52.43278% 87.44618%,
52.97912% 87.30582%,
53.49443% 87.13885%,
53.97558% 86.94697%,
54.41942% 86.73183%,
54.8228% 86.49512%,
55.1826% 86.23851%,
55.49566% 85.96368%,
55.75884% 85.67231%,
55.96901% 85.36606%,
56.12302% 85.04662%,
56.21773% 84.71565%,
56.25% 84.37484%,
56.21773% 84.03403%,
56.12302% 83.70307%,
55.96901% 83.38363%,
55.75884% 83.07738%,
55.49566% 82.786%,
55.1826% 82.51117%,
54.8228% 82.25457%,
54.41942% 82.01786%,
53.97558% 81.80272%,
53.49443% 81.61083%,
52.97912% 81.44387%,
52.43278% 81.30351%,
51.85856% 81.19142%,
51.25959% 81.10928%,
50.63902% 81.05877%,
50% 81.04156%,
49.36097% 81.05877%,
48.74041% 81.10928%,
48.14144% 81.19142%,
47.56722% 81.30351%,
47.02088% 81.44387%,
46.50557% 81.61083%,
46.02442% 81.80272%,
45.58058% 82.01786%,
45.1772% 82.25457%,
44.8174% 82.51117%,
44.50434% 82.786%,
44.24116% 83.07738%,
44.03099% 83.38363%,
43.87698% 83.70307%,
43.78227% 84.03403%
);
}
}
@keyframes PrimerPasoSegundo {
0% {
background: #126c20;
}
80% {
background: #126c20;
}
80.01% {
background: #f2bb29;
-webkit-clip-path: polygon(
43.75% 84.37484%,
43.78227% 84.71565%,
43.87698% 85.04662%,
44.03099% 85.36606%,
44.24116% 85.67231%,
44.50434% 85.96368%,
44.8174% 86.23851%,
45.1772% 86.49512%,
45.58058% 86.73183%,
46.02442% 86.94697%,
46.50557% 87.13885%,
47.02088% 87.30582%,
47.56722% 87.44618%,
48.14144% 87.55827%,
48.74041% 87.6404%,
49.36097% 87.69092%,
50% 87.70812%,
50.63902% 87.69092%,
51.25959% 87.6404%,
51.85856% 87.55827%,
52.43278% 87.44618%,
52.97912% 87.30582%,
53.49443% 87.13885%,
53.97558% 86.94697%,
54.41942% 86.73183%,
54.8228% 86.49512%,
55.1826% 86.23851%,
55.49566% 85.96368%,
55.75884% 85.67231%,
55.96901% 85.36606%,
56.12302% 85.04662%,
56.21773% 84.71565%,
56.25% 84.37484%,
56.21773% 84.03403%,
56.12302% 83.70307%,
55.96901% 83.38363%,
55.75884% 83.07738%,
55.49566% 82.786%,
55.1826% 82.51117%,
54.8228% 82.25457%,
54.41942% 82.01786%,
53.97558% 81.80272%,
53.49443% 81.61083%,
52.97912% 81.44387%,
52.43278% 81.30351%,
51.85856% 81.19142%,
51.25959% 81.10928%,
50.63902% 81.05877%,
50% 81.04156%,
49.36097% 81.05877%,
48.74041% 81.10928%,
48.14144% 81.19142%,
47.56722% 81.30351%,
47.02088% 81.44387%,
46.50557% 81.61083%,
46.02442% 81.80272%,
45.58058% 82.01786%,
45.1772% 82.25457%,
44.8174% 82.51117%,
44.50434% 82.786%,
44.24116% 83.07738%,
44.03099% 83.38363%,
43.87698% 83.70307%,
43.78227% 84.03403%
);
clip-path: polygon(
43.75% 84.37484%,
43.78227% 84.71565%,
43.87698% 85.04662%,
44.03099% 85.36606%,
44.24116% 85.67231%,
44.50434% 85.96368%,
44.8174% 86.23851%,
45.1772% 86.49512%,
45.58058% 86.73183%,
46.02442% 86.94697%,
46.50557% 87.13885%,
47.02088% 87.30582%,
47.56722% 87.44618%,
48.14144% 87.55827%,
48.74041% 87.6404%,
49.36097% 87.69092%,
50% 87.70812%,
50.63902% 87.69092%,
51.25959% 87.6404%,
51.85856% 87.55827%,
52.43278% 87.44618%,
52.97912% 87.30582%,
53.49443% 87.13885%,
53.97558% 86.94697%,
54.41942% 86.73183%,
54.8228% 86.49512%,
55.1826% 86.23851%,
55.49566% 85.96368%,
55.75884% 85.67231%,
55.96901% 85.36606%,
56.12302% 85.04662%,
56.21773% 84.71565%,
56.25% 84.37484%,
56.21773% 84.03403%,
56.12302% 83.70307%,
55.96901% 83.38363%,
55.75884% 83.07738%,
55.49566% 82.786%,
55.1826% 82.51117%,
54.8228% 82.25457%,
54.41942% 82.01786%,
53.97558% 81.80272%,
53.49443% 81.61083%,
52.97912% 81.44387%,
52.43278% 81.30351%,
51.85856% 81.19142%,
51.25959% 81.10928%,
50.63902% 81.05877%,
50% 81.04156%,
49.36097% 81.05877%,
48.74041% 81.10928%,
48.14144% 81.19142%,
47.56722% 81.30351%,
47.02088% 81.44387%,
46.50557% 81.61083%,
46.02442% 81.80272%,
45.58058% 82.01786%,
45.1772% 82.25457%,
44.8174% 82.51117%,
44.50434% 82.786%,
44.24116% 83.07738%,
44.03099% 83.38363%,
43.87698% 83.70307%,
43.78227% 84.03403%
);
}
100% {
background: #f2bb29;
-webkit-clip-path: polygon(
43.75% 84.37484%,
43.78227% 84.71565%,
43.87698% 85.04662%,
44.03099% 85.36606%,
44.24116% 85.67231%,
44.50434% 85.96368%,
44.8174% 86.23851%,
45.1772% 86.49512%,
45.58058% 86.73183%,
46.02442% 86.94697%,
46.50557% 87.13885%,
47.02088% 87.30582%,
47.56722% 87.44618%,
48.14144% 87.55827%,
48.74041% 87.6404%,
49.36097% 87.69092%,
50% 87.70812%,
50.63902% 87.69092%,
51.25959% 87.6404%,
51.85856% 87.55827%,
52.43278% 87.44618%,
52.97912% 87.30582%,
53.49443% 87.13885%,
53.97558% 86.94697%,
54.41942% 86.73183%,
54.8228% 86.49512%,
55.1826% 86.23851%,
55.49566% 85.96368%,
55.75884% 85.67231%,
55.96901% 85.36606%,
56.12302% 85.04662%,
56.21773% 84.71565%,
56.25% 84.37484%,
56.21773% 84.03403%,
56.12302% 83.70307%,
55.96901% 83.38363%,
55.75884% 83.07738%,
55.49566% 82.786%,
55.1826% 82.51117%,
54.8228% 82.25457%,
54.41942% 82.01786%,
53.97558% 81.80272%,
53.49443% 81.61083%,
52.97912% 81.44387%,
52.43278% 81.30351%,
51.85856% 81.19142%,
51.25959% 81.10928%,
50.63902% 81.05877%,
50% 81.04156%,
49.36097% 81.05877%,
48.74041% 81.10928%,
48.14144% 81.19142%,
47.56722% 81.30351%,
47.02088% 81.44387%,
46.50557% 81.61083%,
46.02442% 81.80272%,
45.58058% 82.01786%,
45.1772% 82.25457%,
44.8174% 82.51117%,
44.50434% 82.786%,
44.24116% 83.07738%,
44.03099% 83.38363%,
43.87698% 83.70307%,
43.78227% 84.03403%
);
clip-path: polygon(
43.75% 84.37484%,
43.78227% 84.71565%,
43.87698% 85.04662%,
44.03099% 85.36606%,
44.24116% 85.67231%,
44.50434% 85.96368%,
44.8174% 86.23851%,
45.1772% 86.49512%,
45.58058% 86.73183%,
46.02442% 86.94697%,
46.50557% 87.13885%,
47.02088% 87.30582%,
47.56722% 87.44618%,
48.14144% 87.55827%,
48.74041% 87.6404%,
49.36097% 87.69092%,
50% 87.70812%,
50.63902% 87.69092%,
51.25959% 87.6404%,
51.85856% 87.55827%,
52.43278% 87.44618%,
52.97912% 87.30582%,
53.49443% 87.13885%,
53.97558% 86.94697%,
54.41942% 86.73183%,
54.8228% 86.49512%,
55.1826% 86.23851%,
55.49566% 85.96368%,
55.75884% 85.67231%,
55.96901% 85.36606%,
56.12302% 85.04662%,
56.21773% 84.71565%,
56.25% 84.37484%,
56.21773% 84.03403%,
56.12302% 83.70307%,
55.96901% 83.38363%,
55.75884% 83.07738%,
55.49566% 82.786%,
55.1826% 82.51117%,
54.8228% 82.25457%,
54.41942% 82.01786%,
53.97558% 81.80272%,
53.49443% 81.61083%,
52.97912% 81.44387%,
52.43278% 81.30351%,
51.85856% 81.19142%,
51.25959% 81.10928%,
50.63902% 81.05877%,
50% 81.04156%,
49.36097% 81.05877%,
48.74041% 81.10928%,
48.14144% 81.19142%,
47.56722% 81.30351%,
47.02088% 81.44387%,
46.50557% 81.61083%,
46.02442% 81.80272%,
45.58058% 82.01786%,
45.1772% 82.25457%,
44.8174% 82.51117%,
44.50434% 82.786%,
44.24116% 83.07738%,
44.03099% 83.38363%,
43.87698% 83.70307%,
43.78227% 84.03403%
);
}
}
@-webkit-keyframes PrimerPasoTercer {
0% {
background: #126c20;
-webkit-clip-path: polygon(
56.25% 84.37484%,
56.21773% 84.71565%,
56.12302% 85.04662%,
55.96901% 85.36606%,
55.75884% 85.67231%,
55.49566% 85.96368%,
55.1826% 86.23851%,
54.8228% 86.49512%,
54.41942% 86.73183%,
53.97558% 86.94697%,
53.49443% 87.13885%,
52.97912% 87.30582%,
52.43278% 87.44618%,
51.85856% 87.55827%,
51.25959% 87.6404%,
50.63902% 87.69092%,
50% 87.70812%,
49.36097% 87.69092%,
48.74041% 87.6404%,
48.14144% 87.55827%,
47.56722% 87.44618%,
47.02088% 87.30582%,
46.50557% 87.13885%,
46.02442% 86.94697%,
45.58058% 86.73183%,
45.1772% 86.49512%,
44.8174% 86.23851%,
44.50434% 85.96368%,
44.24116% 85.67231%,
44.03099% 85.36606%,
43.87698% 85.04662%,
43.78227% 84.71565%,
43.75% 84.37484%,
43.78227% 84.03403%,
43.87698% 83.70307%,
44.03099% 83.38363%,
44.24116% 83.07738%,
44.50434% 82.786%,
44.8174% 82.51117%,
45.1772% 82.25457%,
45.58058% 82.01786%,
46.02442% 81.80272%,
46.50557% 81.61083%,
47.02088% 81.44387%,
47.56722% 81.30351%,
48.14144% 81.19142%,
48.74041% 81.10928%,
49.36097% 81.05877%,
50% 81.04156%,
50.63902% 81.05877%,
51.25959% 81.10928%,
51.85856% 81.19142%,
52.43278% 81.30351%,
52.97912% 81.44387%,
53.49443% 81.61083%,
53.97558% 81.80272%,
54.41942% 82.01786%,
54.8228% 82.25457%,
55.1826% 82.51117%,
55.49566% 82.786%,
55.75884% 83.07738%,
55.96901% 83.38363%,
56.12302% 83.70307%,
56.21773% 84.03403%
);
clip-path: polygon(
56.25% 84.37484%,
56.21773% 84.71565%,
56.12302% 85.04662%,
55.96901% 85.36606%,
55.75884% 85.67231%,
55.49566% 85.96368%,
55.1826% 86.23851%,
54.8228% 86.49512%,
54.41942% 86.73183%,
53.97558% 86.94697%,
53.49443% 87.13885%,
52.97912% 87.30582%,
52.43278% 87.44618%,
51.85856% 87.55827%,
51.25959% 87.6404%,
50.63902% 87.69092%,
50% 87.70812%,
49.36097% 87.69092%,
48.74041% 87.6404%,
48.14144% 87.55827%,
47.56722% 87.44618%,
47.02088% 87.30582%,
46.50557% 87.13885%,
46.02442% 86.94697%,
45.58058% 86.73183%,
45.1772% 86.49512%,
44.8174% 86.23851%,
44.50434% 85.96368%,
44.24116% 85.67231%,
44.03099% 85.36606%,
43.87698% 85.04662%,
43.78227% 84.71565%,
43.75% 84.37484%,
43.78227% 84.03403%,
43.87698% 83.70307%,
44.03099% 83.38363%,
44.24116% 83.07738%,
44.50434% 82.786%,
44.8174% 82.51117%,
45.1772% 82.25457%,
45.58058% 82.01786%,
46.02442% 81.80272%,
46.50557% 81.61083%,
47.02088% 81.44387%,
47.56722% 81.30351%,
48.14144% 81.19142%,
48.74041% 81.10928%,
49.36097% 81.05877%,
50% 81.04156%,
50.63902% 81.05877%,
51.25959% 81.10928%,
51.85856% 81.19142%,
52.43278% 81.30351%,
52.97912% 81.44387%,
53.49443% 81.61083%,
53.97558% 81.80272%,
54.41942% 82.01786%,
54.8228% 82.25457%,
55.1826% 82.51117%,
55.49566% 82.786%,
55.75884% 83.07738%,
55.96901% 83.38363%,
56.12302% 83.70307%,
56.21773% 84.03403%
);
}
20% {
-webkit-clip-path: polygon(
231.25% 84.37484%,
230.76597% 89.48698%,
229.34533% 94.45142%,
227.03519% 99.24307%,
223.88266% 103.83678%,
219.93489% 108.20745%,
215.23896% 112.32988%,
209.84205% 116.17897%,
203.79128% 119.72961%,
197.13372% 122.95667%,
189.91651% 125.83498%,
182.18682% 128.33942%,
173.99172% 130.44486%,
165.37839% 132.12622%,
156.39391% 133.35824%,
147.08537% 134.11592%,
137.5% 134.37406%,
127.91462% 134.11592%,
118.60609% 133.35824%,
109.62161% 132.12622%,
101.00828% 130.44486%,
92.81318% 128.33942%,
85.08349% 125.83498%,
77.86628% 122.95667%,
71.20872% 119.72961%,
65.15795% 116.17897%,
59.76105% 112.32988%,
55.06511% 108.20745%,
51.11734% 103.83678%,
47.96481% 99.24307%,
45.65467% 94.45142%,
44.23403% 89.48698%,
43.75% 84.37484%,
44.23403% 79.26271%,
45.65467% 74.29827%,
47.96481% 69.50661%,
51.11734% 64.91291%,
55.06511% 60.54224%,
59.76105% 56.41981%,
65.15795% 52.57072%,
71.20872% 49.02007%,
77.86628% 45.79301%,
85.08349% 42.91471%,
92.81318% 40.41026%,
101.00828% 38.30483%,
109.62161% 36.62347%,
118.60609% 35.39146%,
127.91462% 34.63377%,
137.5% 34.37562%,
147.08537% 34.63377%,
156.39391% 35.39146%,
165.37839% 36.62347%,
173.99172% 38.30483%,
182.18682% 40.41026%,
189.91651% 42.91471%,
197.13372% 45.79301%,
203.79128% 49.02007%,
209.84205% 52.57072%,
215.23896% 56.41981%,
219.93489% 60.54224%,
223.88266% 64.91291%,
227.03519% 69.50661%,
229.34533% 74.29827%,
230.76597% 79.26271%
);
clip-path: polygon(
231.25% 84.37484%,
230.76597% 89.48698%,
229.34533% 94.45142%,
227.03519% 99.24307%,
223.88266% 103.83678%,
219.93489% 108.20745%,
215.23896% 112.32988%,
209.84205% 116.17897%,
203.79128% 119.72961%,
197.13372% 122.95667%,
189.91651% 125.83498%,
182.18682% 128.33942%,
173.99172% 130.44486%,
165.37839% 132.12622%,
156.39391% 133.35824%,
147.08537% 134.11592%,
137.5% 134.37406%,
127.91462% 134.11592%,
118.60609% 133.35824%,
109.62161% 132.12622%,
101.00828% 130.44486%,
92.81318% 128.33942%,
85.08349% 125.83498%,
77.86628% 122.95667%,
71.20872% 119.72961%,
65.15795% 116.17897%,
59.76105% 112.32988%,
55.06511% 108.20745%,
51.11734% 103.83678%,
47.96481% 99.24307%,
45.65467% 94.45142%,
44.23403% 89.48698%,
43.75% 84.37484%,
44.23403% 79.26271%,
45.65467% 74.29827%,
47.96481% 69.50661%,
51.11734% 64.91291%,
55.06511% 60.54224%,
59.76105% 56.41981%,
65.15795% 52.57072%,
71.20872% 49.02007%,
77.86628% 45.79301%,
85.08349% 42.91471%,
92.81318% 40.41026%,
101.00828% 38.30483%,
109.62161% 36.62347%,
118.60609% 35.39146%,
127.91462% 34.63377%,
137.5% 34.37562%,
147.08537% 34.63377%,
156.39391% 35.39146%,
165.37839% 36.62347%,
173.99172% 38.30483%,
182.18682% 40.41026%,
189.91651% 42.91471%,
197.13372% 45.79301%,
203.79128% 49.02007%,
209.84205% 52.57072%,
215.23896% 56.41981%,
219.93489% 60.54224%,
223.88266% 64.91291%,
227.03519% 69.50661%,
229.34533% 74.29827%,
230.76597% 79.26271%
);
}
40% {
background: #126c20;
-webkit-clip-path: polygon(
589.375% 84.37492%,
587.92294% 99.71135%,
583.661% 114.60466%,
576.73056% 128.97963%,
567.273% 142.76073%,
555.42969% 155.87275%,
541.34187% 168.24002%,
525.15116% 179.7873%,
506.99887% 190.43922%,
487.02619% 200.12041%,
465.37456% 208.75535%,
442.18544% 216.26866%,
417.60019% 222.58497%,
391.76016% 227.62905%,
364.80672% 231.3251%,
336.88112% 233.59816%,
308.125% 234.37258%,
279.36888% 233.59816%,
43.75% 231.3251%,
43.75056% 227.62905%,
43.75% 222.58497%,
43.75056% 216.26866%,
43.75% 208.75535%,
43.75056% 200.12041%,
43.75% 190.43922%,
43.75056% 179.7873%,
43.75% 168.24002%,
43.75056% 155.87275%,
43.75% 142.76073%,
43.75056% 128.97963%,
43.75% 114.60466%,
43.75056% 99.71135%,
43.75% 84.37492%,
43.75056% 69.0385%,
43.75% 54.14519%,
43.75056% 39.77022%,
43.75% 25.98911%,
43.75056% 12.87709%,
43.75% 0.50983%,
43.75056% -9.91245%,
43.75% -21.68938%,
43.75056% -31.37056%,
43.75% -40.0055%,
43.75056% -47.51881%,
43.75% -53.83513%,
43.75056% -58.8792%,
43.75% -62.57525%,
279.36888% -64.84832%,
308.125% -65.62273%,
336.88112% -64.84832%,
364.80672% -62.57525%,
391.76016% -58.8792%,
417.60019% -53.83513%,
442.18544% -47.51881%,
465.37456% -40.0055%,
487.02619% -31.37056%,
506.99887% -21.68938%,
525.15116% -11.03745%,
541.34187% 0.50983%,
555.42969% 12.87709%,
567.273% 25.98911%,
576.73056% 39.77022%,
583.661% 54.14519%,
587.92294% 69.0385%
);
clip-path: polygon(
589.375% 84.37492%,
587.92294% 99.71135%,
583.661% 114.60466%,
576.73056% 128.97963%,
567.273% 142.76073%,
555.42969% 155.87275%,
541.34187% 168.24002%,
525.15116% 179.7873%,
506.99887% 190.43922%,
487.02619% 200.12041%,
465.37456% 208.75535%,
442.18544% 216.26866%,
417.60019% 222.58497%,
391.76016% 227.62905%,
364.80672% 231.3251%,
336.88112% 233.59816%,
308.125% 234.37258%,
279.36888% 233.59816%,
43.75% 231.3251%,
43.75056% 227.62905%,
43.75% 222.58497%,
43.75056% 216.26866%,
43.75% 208.75535%,
43.75056% 200.12041%,
43.75% 190.43922%,
43.75056% 179.7873%,
43.75% 168.24002%,
43.75056% 155.87275%,
43.75% 142.76073%,
43.75056% 128.97963%,
43.75% 114.60466%,
43.75056% 99.71135%,
43.75% 84.37492%,
43.75056% 69.0385%,
43.75% 54.14519%,
43.75056% 39.77022%,
43.75% 25.98911%,
43.75056% 12.87709%,
43.75% 0.50983%,
43.75056% -9.91245%,
43.75% -21.68938%,
43.75056% -31.37056%,
43.75% -40.0055%,
43.75056% -47.51881%,
43.75% -53.83513%,
43.75056% -58.8792%,
43.75% -62.57525%,
279.36888% -64.84832%,
308.125% -65.62273%,
336.88112% -64.84832%,
364.80672% -62.57525%,
391.76016% -58.8792%,
417.60019% -53.83513%,
442.18544% -47.51881%,
465.37456% -40.0055%,
487.02619% -31.37056%,
506.99887% -21.68938%,
525.15116% -11.03745%,
541.34187% 0.50983%,
555.42969% 12.87709%,
567.273% 25.98911%,
576.73056% 39.77022%,
583.661% 54.14519%,
587.92294% 69.0385%
);
}
40.01% {
background: #f2bb29;
-webkit-clip-path: polygon(
-501.875% 84.37485%,
-500.42294% 99.71127%,
-496.16097% 114.60458%,
-489.23056% 128.97955%,
-479.77294% 142.76066%,
-467.92969% 155.87268%,
-453.84188% 168.23994%,
-437.65119% 179.78722%,
-419.49887% 190.43915%,
-399.52616% 200.12033%,
-377.87456% 208.75527%,
-354.6855% 216.26858%,
-330.10016% 222.5849%,
-304.26017% 227.62897%,
-277.30672% 231.32502%,
-249.38112% 233.59808%,
-220.625% 234.3725%,
43.74972% 233.59808%,
43.75001% 231.32502%,
43.74972% 227.62897%,
43.75001% 222.5849%,
43.74972% 216.26858%,
43.75001% 208.75527%,
43.74972% 200.12033%,
43.75001% 190.43915%,
43.74972% 179.78722%,
43.75001% 168.23994%,
43.74972% 155.87268%,
43.75001% 142.76066%,
43.74972% 128.97955%,
43.75001% 114.60458%,
43.74972% 99.71127%,
43.75001% 84.37485%,
43.74972% 69.03842%,
43.75001% 54.14511%,
43.74972% 39.77014%,
43.75001% 25.98903%,
43.74972% 12.87702%,
43.75001% 0.50975%,
43.74972% -11.03753%,
43.75001% -21.68945%,
43.74972% -31.37064%,
43.75001% -40.00558%,
43.74972% -47.51889%,
43.75001% -53.83521%,
43.74972% -58.87928%,
43.75001% -62.57533%,
43.74972% -64.84839%,
-220.625% -65.62281%,
-249.38112% -64.84839%,
-277.30672% -62.57533%,
-304.26017% -58.87928%,
-330.10016% -53.83521%,
-354.6855% -47.51889%,
-377.87456% -40.00558%,
-399.52616% -31.37064%,
-419.49887% -21.68945%,
-437.65119% -11.03753%,
-453.84188% 0.50975%,
-467.92969% 12.87702%,
-479.77294% 25.98903%,
-489.23056% 39.77014%,
-496.16097% 54.14511%,
-500.42294% 69.03842%
);
clip-path: polygon(
-501.875% 84.37485%,
-500.42294% 99.71127%,
-496.16097% 114.60458%,
-489.23056% 128.97955%,
-479.77294% 142.76066%,
-467.92969% 155.87268%,
-453.84188% 168.23994%,
-437.65119% 179.78722%,
-419.49887% 190.43915%,
-399.52616% 200.12033%,
-377.87456% 208.75527%,
-354.6855% 216.26858%,
-330.10016% 222.5849%,
-304.26017% 227.62897%,
-277.30672% 231.32502%,
-249.38112% 233.59808%,
-220.625% 234.3725%,
43.74972% 233.59808%,
43.75001% 231.32502%,
43.74972% 227.62897%,
43.75001% 222.5849%,
43.74972% 216.26858%,
43.75001% 208.75527%,
43.74972% 200.12033%,
43.75001% 190.43915%,
43.74972% 179.78722%,
43.75001% 168.23994%,
43.74972% 155.87268%,
43.75001% 142.76066%,
43.74972% 128.97955%,
43.75001% 114.60458%,
43.74972% 99.71127%,
43.75001% 84.37485%,
43.74972% 69.03842%,
43.75001% 54.14511%,
43.74972% 39.77014%,
43.75001% 25.98903%,
43.74972% 12.87702%,
43.75001% 0.50975%,
43.74972% -11.03753%,
43.75001% -21.68945%,
43.74972% -31.37064%,
43.75001% -40.00558%,
43.74972% -47.51889%,
43.75001% -53.83521%,
43.74972% -58.87928%,
43.75001% -62.57533%,
43.74972% -64.84839%,
-220.625% -65.62281%,
-249.38112% -64.84839%,
-277.30672% -62.57533%,
-304.26017% -58.87928%,
-330.10016% -53.83521%,
-354.6855% -47.51889%,
-377.87456% -40.00558%,
-399.52616% -31.37064%,
-419.49887% -21.68945%,
-437.65119% -11.03753%,
-453.84188% 0.50975%,
-467.92969% 12.87702%,
-479.77294% 25.98903%,
-489.23056% 39.77014%,
-496.16097% 54.14511%,
-500.42294% 69.03842%
);
}
60% {
-webkit-clip-path: polygon(
-143.75% 84.37484%,
-143.26597% 89.48698%,
-141.84533% 94.45142%,
-139.53519% 99.24307%,
-136.38266% 103.83678%,
-132.43489% 108.20745%,
-127.73896% 112.32988%,
-122.34205% 116.17897%,
-116.29128% 119.72961%,
-109.63372% 122.95667%,
-102.41651% 125.83498%,
-94.68682% 128.33942%,
-86.49172% 130.44486%,
-77.87839% 132.12622%,
-68.89391% 133.35824%,
-59.58537% 134.11592%,
-50% 134.37406%,
-40.41462% 134.11592%,
-31.10609% 133.35824%,
-22.12161% 132.12622%,
-13.50828% 130.44486%,
-5.31317% 128.33942%,
2.41651% 125.83498%,
9.63372% 122.95667%,
16.29128% 119.72961%,
22.34205% 116.17897%,
27.73895% 112.32988%,
32.43489% 108.20745%,
36.38266% 103.83678%,
39.53519% 99.24307%,
41.84533% 94.45142%,
43.26597% 89.48698%,
43.75% 84.37484%,
43.26597% 79.26271%,
41.84533% 74.29827%,
39.53519% 69.50661%,
36.38266% 64.91291%,
32.43489% 60.54224%,
27.73895% 56.41981%,
22.34205% 52.57072%,
16.29128% 49.02007%,
9.63372% 45.79301%,
2.41651% 42.91471%,
-5.31317% 40.41026%,
-13.50828% 38.30483%,
-22.12161% 36.62347%,
-31.10609% 35.39146%,
-40.41462% 34.63377%,
-50% 34.37562%,
-59.58537% 34.63377%,
-68.89391% 35.39146%,
-77.87839% 36.62347%,
-86.49172% 38.30483%,
-94.68682% 40.41026%,
-102.41651% 42.91471%,
-109.63372% 45.79301%,
-116.29128% 49.02007%,
-122.34205% 52.57072%,
-127.73896% 56.41981%,
-132.43489% 60.54224%,
-136.38266% 64.91291%,
-139.53519% 69.50661%,
-141.84533% 74.29827%,
-143.26597% 79.26271%
);
clip-path: polygon(
-143.75% 84.37484%,
-143.26597% 89.48698%,
-141.84533% 94.45142%,
-139.53519% 99.24307%,
-136.38266% 103.83678%,
-132.43489% 108.20745%,
-127.73896% 112.32988%,
-122.34205% 116.17897%,
-116.29128% 119.72961%,
-109.63372% 122.95667%,
-102.41651% 125.83498%,
-94.68682% 128.33942%,
-86.49172% 130.44486%,
-77.87839% 132.12622%,
-68.89391% 133.35824%,
-59.58537% 134.11592%,
-50% 134.37406%,
-40.41462% 134.11592%,
-31.10609% 133.35824%,
-22.12161% 132.12622%,
-13.50828% 130.44486%,
-5.31317% 128.33942%,
2.41651% 125.83498%,
9.63372% 122.95667%,
16.29128% 119.72961%,
22.34205% 116.17897%,
27.73895% 112.32988%,
32.43489% 108.20745%,
36.38266% 103.83678%,
39.53519% 99.24307%,
41.84533% 94.45142%,
43.26597% 89.48698%,
43.75% 84.37484%,
43.26597% 79.26271%,
41.84533% 74.29827%,
39.53519% 69.50661%,
36.38266% 64.91291%,
32.43489% 60.54224%,
27.73895% 56.41981%,
22.34205% 52.57072%,
16.29128% 49.02007%,
9.63372% 45.79301%,
2.41651% 42.91471%,
-5.31317% 40.41026%,
-13.50828% 38.30483%,
-22.12161% 36.62347%,
-31.10609% 35.39146%,
-40.41462% 34.63377%,
-50% 34.37562%,
-59.58537% 34.63377%,
-68.89391% 35.39146%,
-77.87839% 36.62347%,
-86.49172% 38.30483%,
-94.68682% 40.41026%,
-102.41651% 42.91471%,
-109.63372% 45.79301%,
-116.29128% 49.02007%,
-122.34205% 52.57072%,
-127.73896% 56.41981%,
-132.43489% 60.54224%,
-136.38266% 64.91291%,
-139.53519% 69.50661%,
-141.84533% 74.29827%,
-143.26597% 79.26271%
);
}
80% {
background: #f2bb29;
-webkit-clip-path: polygon(
43.75% 84.37484%,
43.78227% 84.71565%,
43.87698% 85.04662%,
44.03099% 85.36606%,
44.24116% 85.67231%,
44.50434% 85.96368%,
44.8174% 86.23851%,
45.1772% 86.49512%,
45.58058% 86.73183%,
46.02442% 86.94697%,
46.50557% 87.13885%,
47.02088% 87.30582%,
47.56722% 87.44618%,
48.14144% 87.55827%,
48.74041% 87.6404%,
49.36097% 87.69092%,
50% 87.70812%,
50.63902% 87.69092%,
51.25959% 87.6404%,
51.85856% 87.55827%,
52.43278% 87.44618%,
52.97912% 87.30582%,
53.49443% 87.13885%,
53.97558% 86.94697%,
54.41942% 86.73183%,
54.8228% 86.49512%,
55.1826% 86.23851%,
55.49566% 85.96368%,
55.75884% 85.67231%,
55.96901% 85.36606%,
56.12302% 85.04662%,
56.21773% 84.71565%,
56.25% 84.37484%,
56.21773% 84.03403%,
56.12302% 83.70307%,
55.96901% 83.38363%,
55.75884% 83.07738%,
55.49566% 82.786%,
55.1826% 82.51117%,
54.8228% 82.25457%,
54.41942% 82.01786%,
53.97558% 81.80272%,
53.49443% 81.61083%,
52.97912% 81.44387%,
52.43278% 81.30351%,
51.85856% 81.19142%,
51.25959% 81.10928%,
50.63902% 81.05877%,
50% 81.04156%,
49.36097% 81.05877%,
48.74041% 81.10928%,
48.14144% 81.19142%,
47.56722% 81.30351%,
47.02088% 81.44387%,
46.50557% 81.61083%,
46.02442% 81.80272%,
45.58058% 82.01786%,
45.1772% 82.25457%,
44.8174% 82.51117%,
44.50434% 82.786%,
44.24116% 83.07738%,
44.03099% 83.38363%,
43.87698% 83.70307%,
43.78227% 84.03403%
);
clip-path: polygon(
43.75% 84.37484%,
43.78227% 84.71565%,
43.87698% 85.04662%,
44.03099% 85.36606%,
44.24116% 85.67231%,
44.50434% 85.96368%,
44.8174% 86.23851%,
45.1772% 86.49512%,
45.58058% 86.73183%,
46.02442% 86.94697%,
46.50557% 87.13885%,
47.02088% 87.30582%,
47.56722% 87.44618%,
48.14144% 87.55827%,
48.74041% 87.6404%,
49.36097% 87.69092%,
50% 87.70812%,
50.63902% 87.69092%,
51.25959% 87.6404%,
51.85856% 87.55827%,
52.43278% 87.44618%,
52.97912% 87.30582%,
53.49443% 87.13885%,
53.97558% 86.94697%,
54.41942% 86.73183%,
54.8228% 86.49512%,
55.1826% 86.23851%,
55.49566% 85.96368%,
55.75884% 85.67231%,
55.96901% 85.36606%,
56.12302% 85.04662%,
56.21773% 84.71565%,
56.25% 84.37484%,
56.21773% 84.03403%,
56.12302% 83.70307%,
55.96901% 83.38363%,
55.75884% 83.07738%,
55.49566% 82.786%,
55.1826% 82.51117%,
54.8228% 82.25457%,
54.41942% 82.01786%,
53.97558% 81.80272%,
53.49443% 81.61083%,
52.97912% 81.44387%,
52.43278% 81.30351%,
51.85856% 81.19142%,
51.25959% 81.10928%,
50.63902% 81.05877%,
50% 81.04156%,
49.36097% 81.05877%,
48.74041% 81.10928%,
48.14144% 81.19142%,
47.56722% 81.30351%,
47.02088% 81.44387%,
46.50557% 81.61083%,
46.02442% 81.80272%,
45.58058% 82.01786%,
45.1772% 82.25457%,
44.8174% 82.51117%,
44.50434% 82.786%,
44.24116% 83.07738%,
44.03099% 83.38363%,
43.87698% 83.70307%,
43.78227% 84.03403%
);
}
80.01% {
background: #8ed547;
-webkit-clip-path: polygon(
49.9375% 84.37484%,
49.93782% 84.37825%,
49.93877% 84.38156%,
49.94031% 84.38476%,
49.94241% 84.38782%,
49.94504% 84.39073%,
49.94817% 84.39348%,
49.95177% 84.39605%,
49.95581% 84.39841%,
49.96024% 84.40057%,
49.96506% 84.40248%,
49.97021% 84.40415%,
49.97567% 84.40556%,
49.98142% 84.40668%,
49.9874% 84.4075%,
49.99361% 84.408%,
50% 84.40818%,
50.00639% 84.408%,
50.0126% 84.4075%,
50.01858% 84.40668%,
50.02433% 84.40556%,
50.02979% 84.40415%,
50.03494% 84.40248%,
50.03976% 84.40057%,
50.04419% 84.39841%,
50.04823% 84.39605%,
50.05183% 84.39348%,
50.05496% 84.39073%,
50.05759% 84.38782%,
50.05969% 84.38476%,
50.06123% 84.38156%,
50.06218% 84.37825%,
50.0625% 84.37484%,
50.06218% 84.37143%,
50.06123% 84.36812%,
50.05969% 84.36493%,
50.05759% 84.36187%,
50.05496% 84.35896%,
50.05183% 84.35621%,
50.04823% 84.35364%,
50.04419% 84.35128%,
50.03976% 84.34912%,
50.03494% 84.3472%,
50.02979% 84.34553%,
50.02433% 84.34413%,
50.01858% 84.34301%,
50.0126% 84.34219%,
50.00639% 84.34168%,
50% 84.34151%,
49.99361% 84.34168%,
49.9874% 84.34219%,
49.98142% 84.34301%,
49.97567% 84.34413%,
49.97021% 84.34553%,
49.96506% 84.3472%,
49.96024% 84.34912%,
49.95581% 84.35128%,
49.95177% 84.35364%,
49.94817% 84.35621%,
49.94504% 84.35896%,
49.94241% 84.36187%,
49.94031% 84.36493%,
49.93877% 84.36812%,
49.93782% 84.37143%
);
clip-path: polygon(
49.9375% 84.37484%,
49.93782% 84.37825%,
49.93877% 84.38156%,
49.94031% 84.38476%,
49.94241% 84.38782%,
49.94504% 84.39073%,
49.94817% 84.39348%,
49.95177% 84.39605%,
49.95581% 84.39841%,
49.96024% 84.40057%,
49.96506% 84.40248%,
49.97021% 84.40415%,
49.97567% 84.40556%,
49.98142% 84.40668%,
49.9874% 84.4075%,
49.99361% 84.408%,
50% 84.40818%,
50.00639% 84.408%,
50.0126% 84.4075%,
50.01858% 84.40668%,
50.02433% 84.40556%,
50.02979% 84.40415%,
50.03494% 84.40248%,
50.03976% 84.40057%,
50.04419% 84.39841%,
50.04823% 84.39605%,
50.05183% 84.39348%,
50.05496% 84.39073%,
50.05759% 84.38782%,
50.05969% 84.38476%,
50.06123% 84.38156%,
50.06218% 84.37825%,
50.0625% 84.37484%,
50.06218% 84.37143%,
50.06123% 84.36812%,
50.05969% 84.36493%,
50.05759% 84.36187%,
50.05496% 84.35896%,
50.05183% 84.35621%,
50.04823% 84.35364%,
50.04419% 84.35128%,
50.03976% 84.34912%,
50.03494% 84.3472%,
50.02979% 84.34553%,
50.02433% 84.34413%,
50.01858% 84.34301%,
50.0126% 84.34219%,
50.00639% 84.34168%,
50% 84.34151%,
49.99361% 84.34168%,
49.9874% 84.34219%,
49.98142% 84.34301%,
49.97567% 84.34413%,
49.97021% 84.34553%,
49.96506% 84.3472%,
49.96024% 84.34912%,
49.95581% 84.35128%,
49.95177% 84.35364%,
49.94817% 84.35621%,
49.94504% 84.35896%,
49.94241% 84.36187%,
49.94031% 84.36493%,
49.93877% 84.36812%,
49.93782% 84.37143%
);
}
100% {
background: #8ed547;
-webkit-clip-path: polygon(
43.75% 84.37484%,
43.78227% 84.71565%,
43.87698% 85.04662%,
44.03099% 85.36606%,
44.24116% 85.67231%,
44.50434% 85.96368%,
44.8174% 86.23851%,
45.1772% 86.49512%,
45.58058% 86.73183%,
46.02442% 86.94697%,
46.50557% 87.13885%,
47.02088% 87.30582%,
47.56722% 87.44618%,
48.14144% 87.55827%,
48.74041% 87.6404%,
49.36097% 87.69092%,
50% 87.70812%,
50.63902% 87.69092%,
51.25959% 87.6404%,
51.85856% 87.55827%,
52.43278% 87.44618%,
52.97912% 87.30582%,
53.49443% 87.13885%,
53.97558% 86.94697%,
54.41942% 86.73183%,
54.8228% 86.49512%,
55.1826% 86.23851%,
55.49566% 85.96368%,
55.75884% 85.67231%,
55.96901% 85.36606%,
56.12302% 85.04662%,
56.21773% 84.71565%,
56.25% 84.37484%,
56.21773% 84.03403%,
56.12302% 83.70307%,
55.96901% 83.38363%,
55.75884% 83.07738%,
55.49566% 82.786%,
55.1826% 82.51117%,
54.8228% 82.25457%,
54.41942% 82.01786%,
53.97558% 81.80272%,
53.49443% 81.61083%,
52.97912% 81.44387%,
52.43278% 81.30351%,
51.85856% 81.19142%,
51.25959% 81.10928%,
50.63902% 81.05877%,
50% 81.04156%,
49.36097% 81.05877%,
48.74041% 81.10928%,
48.14144% 81.19142%,
47.56722% 81.30351%,
47.02088% 81.44387%,
46.50557% 81.61083%,
46.02442% 81.80272%,
45.58058% 82.01786%,
45.1772% 82.25457%,
44.8174% 82.51117%,
44.50434% 82.786%,
44.24116% 83.07738%,
44.03099% 83.38363%,
43.87698% 83.70307%,
43.78227% 84.03403%
);
clip-path: polygon(
43.75% 84.37484%,
43.78227% 84.71565%,
43.87698% 85.04662%,
44.03099% 85.36606%,
44.24116% 85.67231%,
44.50434% 85.96368%,
44.8174% 86.23851%,
45.1772% 86.49512%,
45.58058% 86.73183%,
46.02442% 86.94697%,
46.50557% 87.13885%,
47.02088% 87.30582%,
47.56722% 87.44618%,
48.14144% 87.55827%,
48.74041% 87.6404%,
49.36097% 87.69092%,
50% 87.70812%,
50.63902% 87.69092%,
51.25959% 87.6404%,
51.85856% 87.55827%,
52.43278% 87.44618%,
52.97912% 87.30582%,
53.49443% 87.13885%,
53.97558% 86.94697%,
54.41942% 86.73183%,
54.8228% 86.49512%,
55.1826% 86.23851%,
55.49566% 85.96368%,
55.75884% 85.67231%,
55.96901% 85.36606%,
56.12302% 85.04662%,
56.21773% 84.71565%,
56.25% 84.37484%,
56.21773% 84.03403%,
56.12302% 83.70307%,
55.96901% 83.38363%,
55.75884% 83.07738%,
55.49566% 82.786%,
55.1826% 82.51117%,
54.8228% 82.25457%,
54.41942% 82.01786%,
53.97558% 81.80272%,
53.49443% 81.61083%,
52.97912% 81.44387%,
52.43278% 81.30351%,
51.85856% 81.19142%,
51.25959% 81.10928%,
50.63902% 81.05877%,
50% 81.04156%,
49.36097% 81.05877%,
48.74041% 81.10928%,
48.14144% 81.19142%,
47.56722% 81.30351%,
47.02088% 81.44387%,
46.50557% 81.61083%,
46.02442% 81.80272%,
45.58058% 82.01786%,
45.1772% 82.25457%,
44.8174% 82.51117%,
44.50434% 82.786%,
44.24116% 83.07738%,
44.03099% 83.38363%,
43.87698% 83.70307%,
43.78227% 84.03403%
);
}
}
@keyframes PrimerPasoTercer {
0% {
background: #126c20;
-webkit-clip-path: polygon(
56.25% 84.37484%,
56.21773% 84.71565%,
56.12302% 85.04662%,
55.96901% 85.36606%,
55.75884% 85.67231%,
55.49566% 85.96368%,
55.1826% 86.23851%,
54.8228% 86.49512%,
54.41942% 86.73183%,
53.97558% 86.94697%,
53.49443% 87.13885%,
52.97912% 87.30582%,
52.43278% 87.44618%,
51.85856% 87.55827%,
51.25959% 87.6404%,
50.63902% 87.69092%,
50% 87.70812%,
49.36097% 87.69092%,
48.74041% 87.6404%,
48.14144% 87.55827%,
47.56722% 87.44618%,
47.02088% 87.30582%,
46.50557% 87.13885%,
46.02442% 86.94697%,
45.58058% 86.73183%,
45.1772% 86.49512%,
44.8174% 86.23851%,
44.50434% 85.96368%,
44.24116% 85.67231%,
44.03099% 85.36606%,
43.87698% 85.04662%,
43.78227% 84.71565%,
43.75% 84.37484%,
43.78227% 84.03403%,
43.87698% 83.70307%,
44.03099% 83.38363%,
44.24116% 83.07738%,
44.50434% 82.786%,
44.8174% 82.51117%,
45.1772% 82.25457%,
45.58058% 82.01786%,
46.02442% 81.80272%,
46.50557% 81.61083%,
47.02088% 81.44387%,
47.56722% 81.30351%,
48.14144% 81.19142%,
48.74041% 81.10928%,
49.36097% 81.05877%,
50% 81.04156%,
50.63902% 81.05877%,
51.25959% 81.10928%,
51.85856% 81.19142%,
52.43278% 81.30351%,
52.97912% 81.44387%,
53.49443% 81.61083%,
53.97558% 81.80272%,
54.41942% 82.01786%,
54.8228% 82.25457%,
55.1826% 82.51117%,
55.49566% 82.786%,
55.75884% 83.07738%,
55.96901% 83.38363%,
56.12302% 83.70307%,
56.21773% 84.03403%
);
clip-path: polygon(
56.25% 84.37484%,
56.21773% 84.71565%,
56.12302% 85.04662%,
55.96901% 85.36606%,
55.75884% 85.67231%,
55.49566% 85.96368%,
55.1826% 86.23851%,
54.8228% 86.49512%,
54.41942% 86.73183%,
53.97558% 86.94697%,
53.49443% 87.13885%,
52.97912% 87.30582%,
52.43278% 87.44618%,
51.85856% 87.55827%,
51.25959% 87.6404%,
50.63902% 87.69092%,
50% 87.70812%,
49.36097% 87.69092%,
48.74041% 87.6404%,
48.14144% 87.55827%,
47.56722% 87.44618%,
47.02088% 87.30582%,
46.50557% 87.13885%,
46.02442% 86.94697%,
45.58058% 86.73183%,
45.1772% 86.49512%,
44.8174% 86.23851%,
44.50434% 85.96368%,
44.24116% 85.67231%,
44.03099% 85.36606%,
43.87698% 85.04662%,
43.78227% 84.71565%,
43.75% 84.37484%,
43.78227% 84.03403%,
43.87698% 83.70307%,
44.03099% 83.38363%,
44.24116% 83.07738%,
44.50434% 82.786%,
44.8174% 82.51117%,
45.1772% 82.25457%,
45.58058% 82.01786%,
46.02442% 81.80272%,
46.50557% 81.61083%,
47.02088% 81.44387%,
47.56722% 81.30351%,
48.14144% 81.19142%,
48.74041% 81.10928%,
49.36097% 81.05877%,
50% 81.04156%,
50.63902% 81.05877%,
51.25959% 81.10928%,
51.85856% 81.19142%,
52.43278% 81.30351%,
52.97912% 81.44387%,
53.49443% 81.61083%,
53.97558% 81.80272%,
54.41942% 82.01786%,
54.8228% 82.25457%,
55.1826% 82.51117%,
55.49566% 82.786%,
55.75884% 83.07738%,
55.96901% 83.38363%,
56.12302% 83.70307%,
56.21773% 84.03403%
);
}
20% {
-webkit-clip-path: polygon(
231.25% 84.37484%,
230.76597% 89.48698%,
229.34533% 94.45142%,
227.03519% 99.24307%,
223.88266% 103.83678%,
219.93489% 108.20745%,
215.23896% 112.32988%,
209.84205% 116.17897%,
203.79128% 119.72961%,
197.13372% 122.95667%,
189.91651% 125.83498%,
182.18682% 128.33942%,
173.99172% 130.44486%,
165.37839% 132.12622%,
156.39391% 133.35824%,
147.08537% 134.11592%,
137.5% 134.37406%,
127.91462% 134.11592%,
118.60609% 133.35824%,
109.62161% 132.12622%,
101.00828% 130.44486%,
92.81318% 128.33942%,
85.08349% 125.83498%,
77.86628% 122.95667%,
71.20872% 119.72961%,
65.15795% 116.17897%,
59.76105% 112.32988%,
55.06511% 108.20745%,
51.11734% 103.83678%,
47.96481% 99.24307%,
45.65467% 94.45142%,
44.23403% 89.48698%,
43.75% 84.37484%,
44.23403% 79.26271%,
45.65467% 74.29827%,
47.96481% 69.50661%,
51.11734% 64.91291%,
55.06511% 60.54224%,
59.76105% 56.41981%,
65.15795% 52.57072%,
71.20872% 49.02007%,
77.86628% 45.79301%,
85.08349% 42.91471%,
92.81318% 40.41026%,
101.00828% 38.30483%,
109.62161% 36.62347%,
118.60609% 35.39146%,
127.91462% 34.63377%,
137.5% 34.37562%,
147.08537% 34.63377%,
156.39391% 35.39146%,
165.37839% 36.62347%,
173.99172% 38.30483%,
182.18682% 40.41026%,
189.91651% 42.91471%,
197.13372% 45.79301%,
203.79128% 49.02007%,
209.84205% 52.57072%,
215.23896% 56.41981%,
219.93489% 60.54224%,
223.88266% 64.91291%,
227.03519% 69.50661%,
229.34533% 74.29827%,
230.76597% 79.26271%
);
clip-path: polygon(
231.25% 84.37484%,
230.76597% 89.48698%,
229.34533% 94.45142%,
227.03519% 99.24307%,
223.88266% 103.83678%,
219.93489% 108.20745%,
215.23896% 112.32988%,
209.84205% 116.17897%,
203.79128% 119.72961%,
197.13372% 122.95667%,
189.91651% 125.83498%,
182.18682% 128.33942%,
173.99172% 130.44486%,
165.37839% 132.12622%,
156.39391% 133.35824%,
147.08537% 134.11592%,
137.5% 134.37406%,
127.91462% 134.11592%,
118.60609% 133.35824%,
109.62161% 132.12622%,
101.00828% 130.44486%,
92.81318% 128.33942%,
85.08349% 125.83498%,
77.86628% 122.95667%,
71.20872% 119.72961%,
65.15795% 116.17897%,
59.76105% 112.32988%,
55.06511% 108.20745%,
51.11734% 103.83678%,
47.96481% 99.24307%,
45.65467% 94.45142%,
44.23403% 89.48698%,
43.75% 84.37484%,
44.23403% 79.26271%,
45.65467% 74.29827%,
47.96481% 69.50661%,
51.11734% 64.91291%,
55.06511% 60.54224%,
59.76105% 56.41981%,
65.15795% 52.57072%,
71.20872% 49.02007%,
77.86628% 45.79301%,
85.08349% 42.91471%,
92.81318% 40.41026%,
101.00828% 38.30483%,
109.62161% 36.62347%,
118.60609% 35.39146%,
127.91462% 34.63377%,
137.5% 34.37562%,
147.08537% 34.63377%,
156.39391% 35.39146%,
165.37839% 36.62347%,
173.99172% 38.30483%,
182.18682% 40.41026%,
189.91651% 42.91471%,
197.13372% 45.79301%,
203.79128% 49.02007%,
209.84205% 52.57072%,
215.23896% 56.41981%,
219.93489% 60.54224%,
223.88266% 64.91291%,
227.03519% 69.50661%,
229.34533% 74.29827%,
230.76597% 79.26271%
);
}
40% {
background: #126c20;
-webkit-clip-path: polygon(
589.375% 84.37492%,
587.92294% 99.71135%,
583.661% 114.60466%,
576.73056% 128.97963%,
567.273% 142.76073%,
555.42969% 155.87275%,
541.34187% 168.24002%,
525.15116% 179.7873%,
506.99887% 190.43922%,
487.02619% 200.12041%,
465.37456% 208.75535%,
442.18544% 216.26866%,
417.60019% 222.58497%,
391.76016% 227.62905%,
364.80672% 231.3251%,
336.88112% 233.59816%,
308.125% 234.37258%,
279.36888% 233.59816%,
43.75% 231.3251%,
43.75056% 227.62905%,
43.75% 222.58497%,
43.75056% 216.26866%,
43.75% 208.75535%,
43.75056% 200.12041%,
43.75% 190.43922%,
43.75056% 179.7873%,
43.75% 168.24002%,
43.75056% 155.87275%,
43.75% 142.76073%,
43.75056% 128.97963%,
43.75% 114.60466%,
43.75056% 99.71135%,
43.75% 84.37492%,
43.75056% 69.0385%,
43.75% 54.14519%,
43.75056% 39.77022%,
43.75% 25.98911%,
43.75056% 12.87709%,
43.75% 0.50983%,
43.75056% -9.91245%,
43.75% -21.68938%,
43.75056% -31.37056%,
43.75% -40.0055%,
43.75056% -47.51881%,
43.75% -53.83513%,
43.75056% -58.8792%,
43.75% -62.57525%,
279.36888% -64.84832%,
308.125% -65.62273%,
336.88112% -64.84832%,
364.80672% -62.57525%,
391.76016% -58.8792%,
417.60019% -53.83513%,
442.18544% -47.51881%,
465.37456% -40.0055%,
487.02619% -31.37056%,
506.99887% -21.68938%,
525.15116% -11.03745%,
541.34187% 0.50983%,
555.42969% 12.87709%,
567.273% 25.98911%,
576.73056% 39.77022%,
583.661% 54.14519%,
587.92294% 69.0385%
);
clip-path: polygon(
589.375% 84.37492%,
587.92294% 99.71135%,
583.661% 114.60466%,
576.73056% 128.97963%,
567.273% 142.76073%,
555.42969% 155.87275%,
541.34187% 168.24002%,
525.15116% 179.7873%,
506.99887% 190.43922%,
487.02619% 200.12041%,
465.37456% 208.75535%,
442.18544% 216.26866%,
417.60019% 222.58497%,
391.76016% 227.62905%,
364.80672% 231.3251%,
336.88112% 233.59816%,
308.125% 234.37258%,
279.36888% 233.59816%,
43.75% 231.3251%,
43.75056% 227.62905%,
43.75% 222.58497%,
43.75056% 216.26866%,
43.75% 208.75535%,
43.75056% 200.12041%,
43.75% 190.43922%,
43.75056% 179.7873%,
43.75% 168.24002%,
43.75056% 155.87275%,
43.75% 142.76073%,
43.75056% 128.97963%,
43.75% 114.60466%,
43.75056% 99.71135%,
43.75% 84.37492%,
43.75056% 69.0385%,
43.75% 54.14519%,
43.75056% 39.77022%,
43.75% 25.98911%,
43.75056% 12.87709%,
43.75% 0.50983%,
43.75056% -9.91245%,
43.75% -21.68938%,
43.75056% -31.37056%,
43.75% -40.0055%,
43.75056% -47.51881%,
43.75% -53.83513%,
43.75056% -58.8792%,
43.75% -62.57525%,
279.36888% -64.84832%,
308.125% -65.62273%,
336.88112% -64.84832%,
364.80672% -62.57525%,
391.76016% -58.8792%,
417.60019% -53.83513%,
442.18544% -47.51881%,
465.37456% -40.0055%,
487.02619% -31.37056%,
506.99887% -21.68938%,
525.15116% -11.03745%,
541.34187% 0.50983%,
555.42969% 12.87709%,
567.273% 25.98911%,
576.73056% 39.77022%,
583.661% 54.14519%,
587.92294% 69.0385%
);
}
40.01% {
background: #f2bb29;
-webkit-clip-path: polygon(
-501.875% 84.37485%,
-500.42294% 99.71127%,
-496.16097% 114.60458%,
-489.23056% 128.97955%,
-479.77294% 142.76066%,
-467.92969% 155.87268%,
-453.84188% 168.23994%,
-437.65119% 179.78722%,
-419.49887% 190.43915%,
-399.52616% 200.12033%,
-377.87456% 208.75527%,
-354.6855% 216.26858%,
-330.10016% 222.5849%,
-304.26017% 227.62897%,
-277.30672% 231.32502%,
-249.38112% 233.59808%,
-220.625% 234.3725%,
43.74972% 233.59808%,
43.75001% 231.32502%,
43.74972% 227.62897%,
43.75001% 222.5849%,
43.74972% 216.26858%,
43.75001% 208.75527%,
43.74972% 200.12033%,
43.75001% 190.43915%,
43.74972% 179.78722%,
43.75001% 168.23994%,
43.74972% 155.87268%,
43.75001% 142.76066%,
43.74972% 128.97955%,
43.75001% 114.60458%,
43.74972% 99.71127%,
43.75001% 84.37485%,
43.74972% 69.03842%,
43.75001% 54.14511%,
43.74972% 39.77014%,
43.75001% 25.98903%,
43.74972% 12.87702%,
43.75001% 0.50975%,
43.74972% -11.03753%,
43.75001% -21.68945%,
43.74972% -31.37064%,
43.75001% -40.00558%,
43.74972% -47.51889%,
43.75001% -53.83521%,
43.74972% -58.87928%,
43.75001% -62.57533%,
43.74972% -64.84839%,
-220.625% -65.62281%,
-249.38112% -64.84839%,
-277.30672% -62.57533%,
-304.26017% -58.87928%,
-330.10016% -53.83521%,
-354.6855% -47.51889%,
-377.87456% -40.00558%,
-399.52616% -31.37064%,
-419.49887% -21.68945%,
-437.65119% -11.03753%,
-453.84188% 0.50975%,
-467.92969% 12.87702%,
-479.77294% 25.98903%,
-489.23056% 39.77014%,
-496.16097% 54.14511%,
-500.42294% 69.03842%
);
clip-path: polygon(
-501.875% 84.37485%,
-500.42294% 99.71127%,
-496.16097% 114.60458%,
-489.23056% 128.97955%,
-479.77294% 142.76066%,
-467.92969% 155.87268%,
-453.84188% 168.23994%,
-437.65119% 179.78722%,
-419.49887% 190.43915%,
-399.52616% 200.12033%,
-377.87456% 208.75527%,
-354.6855% 216.26858%,
-330.10016% 222.5849%,
-304.26017% 227.62897%,
-277.30672% 231.32502%,
-249.38112% 233.59808%,
-220.625% 234.3725%,
43.74972% 233.59808%,
43.75001% 231.32502%,
43.74972% 227.62897%,
43.75001% 222.5849%,
43.74972% 216.26858%,
43.75001% 208.75527%,
43.74972% 200.12033%,
43.75001% 190.43915%,
43.74972% 179.78722%,
43.75001% 168.23994%,
43.74972% 155.87268%,
43.75001% 142.76066%,
43.74972% 128.97955%,
43.75001% 114.60458%,
43.74972% 99.71127%,
43.75001% 84.37485%,
43.74972% 69.03842%,
43.75001% 54.14511%,
43.74972% 39.77014%,
43.75001% 25.98903%,
43.74972% 12.87702%,
43.75001% 0.50975%,
43.74972% -11.03753%,
43.75001% -21.68945%,
43.74972% -31.37064%,
43.75001% -40.00558%,
43.74972% -47.51889%,
43.75001% -53.83521%,
43.74972% -58.87928%,
43.75001% -62.57533%,
43.74972% -64.84839%,
-220.625% -65.62281%,
-249.38112% -64.84839%,
-277.30672% -62.57533%,
-304.26017% -58.87928%,
-330.10016% -53.83521%,
-354.6855% -47.51889%,
-377.87456% -40.00558%,
-399.52616% -31.37064%,
-419.49887% -21.68945%,
-437.65119% -11.03753%,
-453.84188% 0.50975%,
-467.92969% 12.87702%,
-479.77294% 25.98903%,
-489.23056% 39.77014%,
-496.16097% 54.14511%,
-500.42294% 69.03842%
);
}
60% {
-webkit-clip-path: polygon(
-143.75% 84.37484%,
-143.26597% 89.48698%,
-141.84533% 94.45142%,
-139.53519% 99.24307%,
-136.38266% 103.83678%,
-132.43489% 108.20745%,
-127.73896% 112.32988%,
-122.34205% 116.17897%,
-116.29128% 119.72961%,
-109.63372% 122.95667%,
-102.41651% 125.83498%,
-94.68682% 128.33942%,
-86.49172% 130.44486%,
-77.87839% 132.12622%,
-68.89391% 133.35824%,
-59.58537% 134.11592%,
-50% 134.37406%,
-40.41462% 134.11592%,
-31.10609% 133.35824%,
-22.12161% 132.12622%,
-13.50828% 130.44486%,
-5.31317% 128.33942%,
2.41651% 125.83498%,
9.63372% 122.95667%,
16.29128% 119.72961%,
22.34205% 116.17897%,
27.73895% 112.32988%,
32.43489% 108.20745%,
36.38266% 103.83678%,
39.53519% 99.24307%,
41.84533% 94.45142%,
43.26597% 89.48698%,
43.75% 84.37484%,
43.26597% 79.26271%,
41.84533% 74.29827%,
39.53519% 69.50661%,
36.38266% 64.91291%,
32.43489% 60.54224%,
27.73895% 56.41981%,
22.34205% 52.57072%,
16.29128% 49.02007%,
9.63372% 45.79301%,
2.41651% 42.91471%,
-5.31317% 40.41026%,
-13.50828% 38.30483%,
-22.12161% 36.62347%,
-31.10609% 35.39146%,
-40.41462% 34.63377%,
-50% 34.37562%,
-59.58537% 34.63377%,
-68.89391% 35.39146%,
-77.87839% 36.62347%,
-86.49172% 38.30483%,
-94.68682% 40.41026%,
-102.41651% 42.91471%,
-109.63372% 45.79301%,
-116.29128% 49.02007%,
-122.34205% 52.57072%,
-127.73896% 56.41981%,
-132.43489% 60.54224%,
-136.38266% 64.91291%,
-139.53519% 69.50661%,
-141.84533% 74.29827%,
-143.26597% 79.26271%
);
clip-path: polygon(
-143.75% 84.37484%,
-143.26597% 89.48698%,
-141.84533% 94.45142%,
-139.53519% 99.24307%,
-136.38266% 103.83678%,
-132.43489% 108.20745%,
-127.73896% 112.32988%,
-122.34205% 116.17897%,
-116.29128% 119.72961%,
-109.63372% 122.95667%,
-102.41651% 125.83498%,
-94.68682% 128.33942%,
-86.49172% 130.44486%,
-77.87839% 132.12622%,
-68.89391% 133.35824%,
-59.58537% 134.11592%,
-50% 134.37406%,
-40.41462% 134.11592%,
-31.10609% 133.35824%,
-22.12161% 132.12622%,
-13.50828% 130.44486%,
-5.31317% 128.33942%,
2.41651% 125.83498%,
9.63372% 122.95667%,
16.29128% 119.72961%,
22.34205% 116.17897%,
27.73895% 112.32988%,
32.43489% 108.20745%,
36.38266% 103.83678%,
39.53519% 99.24307%,
41.84533% 94.45142%,
43.26597% 89.48698%,
43.75% 84.37484%,
43.26597% 79.26271%,
41.84533% 74.29827%,
39.53519% 69.50661%,
36.38266% 64.91291%,
32.43489% 60.54224%,
27.73895% 56.41981%,
22.34205% 52.57072%,
16.29128% 49.02007%,
9.63372% 45.79301%,
2.41651% 42.91471%,
-5.31317% 40.41026%,
-13.50828% 38.30483%,
-22.12161% 36.62347%,
-31.10609% 35.39146%,
-40.41462% 34.63377%,
-50% 34.37562%,
-59.58537% 34.63377%,
-68.89391% 35.39146%,
-77.87839% 36.62347%,
-86.49172% 38.30483%,
-94.68682% 40.41026%,
-102.41651% 42.91471%,
-109.63372% 45.79301%,
-116.29128% 49.02007%,
-122.34205% 52.57072%,
-127.73896% 56.41981%,
-132.43489% 60.54224%,
-136.38266% 64.91291%,
-139.53519% 69.50661%,
-141.84533% 74.29827%,
-143.26597% 79.26271%
);
}
80% {
background: #f2bb29;
-webkit-clip-path: polygon(
43.75% 84.37484%,
43.78227% 84.71565%,
43.87698% 85.04662%,
44.03099% 85.36606%,
44.24116% 85.67231%,
44.50434% 85.96368%,
44.8174% 86.23851%,
45.1772% 86.49512%,
45.58058% 86.73183%,
46.02442% 86.94697%,
46.50557% 87.13885%,
47.02088% 87.30582%,
47.56722% 87.44618%,
48.14144% 87.55827%,
48.74041% 87.6404%,
49.36097% 87.69092%,
50% 87.70812%,
50.63902% 87.69092%,
51.25959% 87.6404%,
51.85856% 87.55827%,
52.43278% 87.44618%,
52.97912% 87.30582%,
53.49443% 87.13885%,
53.97558% 86.94697%,
54.41942% 86.73183%,
54.8228% 86.49512%,
55.1826% 86.23851%,
55.49566% 85.96368%,
55.75884% 85.67231%,
55.96901% 85.36606%,
56.12302% 85.04662%,
56.21773% 84.71565%,
56.25% 84.37484%,
56.21773% 84.03403%,
56.12302% 83.70307%,
55.96901% 83.38363%,
55.75884% 83.07738%,
55.49566% 82.786%,
55.1826% 82.51117%,
54.8228% 82.25457%,
54.41942% 82.01786%,
53.97558% 81.80272%,
53.49443% 81.61083%,
52.97912% 81.44387%,
52.43278% 81.30351%,
51.85856% 81.19142%,
51.25959% 81.10928%,
50.63902% 81.05877%,
50% 81.04156%,
49.36097% 81.05877%,
48.74041% 81.10928%,
48.14144% 81.19142%,
47.56722% 81.30351%,
47.02088% 81.44387%,
46.50557% 81.61083%,
46.02442% 81.80272%,
45.58058% 82.01786%,
45.1772% 82.25457%,
44.8174% 82.51117%,
44.50434% 82.786%,
44.24116% 83.07738%,
44.03099% 83.38363%,
43.87698% 83.70307%,
43.78227% 84.03403%
);
clip-path: polygon(
43.75% 84.37484%,
43.78227% 84.71565%,
43.87698% 85.04662%,
44.03099% 85.36606%,
44.24116% 85.67231%,
44.50434% 85.96368%,
44.8174% 86.23851%,
45.1772% 86.49512%,
45.58058% 86.73183%,
46.02442% 86.94697%,
46.50557% 87.13885%,
47.02088% 87.30582%,
47.56722% 87.44618%,
48.14144% 87.55827%,
48.74041% 87.6404%,
49.36097% 87.69092%,
50% 87.70812%,
50.63902% 87.69092%,
51.25959% 87.6404%,
51.85856% 87.55827%,
52.43278% 87.44618%,
52.97912% 87.30582%,
53.49443% 87.13885%,
53.97558% 86.94697%,
54.41942% 86.73183%,
54.8228% 86.49512%,
55.1826% 86.23851%,
55.49566% 85.96368%,
55.75884% 85.67231%,
55.96901% 85.36606%,
56.12302% 85.04662%,
56.21773% 84.71565%,
56.25% 84.37484%,
56.21773% 84.03403%,
56.12302% 83.70307%,
55.96901% 83.38363%,
55.75884% 83.07738%,
55.49566% 82.786%,
55.1826% 82.51117%,
54.8228% 82.25457%,
54.41942% 82.01786%,
53.97558% 81.80272%,
53.49443% 81.61083%,
52.97912% 81.44387%,
52.43278% 81.30351%,
51.85856% 81.19142%,
51.25959% 81.10928%,
50.63902% 81.05877%,
50% 81.04156%,
49.36097% 81.05877%,
48.74041% 81.10928%,
48.14144% 81.19142%,
47.56722% 81.30351%,
47.02088% 81.44387%,
46.50557% 81.61083%,
46.02442% 81.80272%,
45.58058% 82.01786%,
45.1772% 82.25457%,
44.8174% 82.51117%,
44.50434% 82.786%,
44.24116% 83.07738%,
44.03099% 83.38363%,
43.87698% 83.70307%,
43.78227% 84.03403%
);
}
80.01% {
background: #8ed547;
-webkit-clip-path: polygon(
49.9375% 84.37484%,
49.93782% 84.37825%,
49.93877% 84.38156%,
49.94031% 84.38476%,
49.94241% 84.38782%,
49.94504% 84.39073%,
49.94817% 84.39348%,
49.95177% 84.39605%,
49.95581% 84.39841%,
49.96024% 84.40057%,
49.96506% 84.40248%,
49.97021% 84.40415%,
49.97567% 84.40556%,
49.98142% 84.40668%,
49.9874% 84.4075%,
49.99361% 84.408%,
50% 84.40818%,
50.00639% 84.408%,
50.0126% 84.4075%,
50.01858% 84.40668%,
50.02433% 84.40556%,
50.02979% 84.40415%,
50.03494% 84.40248%,
50.03976% 84.40057%,
50.04419% 84.39841%,
50.04823% 84.39605%,
50.05183% 84.39348%,
50.05496% 84.39073%,
50.05759% 84.38782%,
50.05969% 84.38476%,
50.06123% 84.38156%,
50.06218% 84.37825%,
50.0625% 84.37484%,
50.06218% 84.37143%,
50.06123% 84.36812%,
50.05969% 84.36493%,
50.05759% 84.36187%,
50.05496% 84.35896%,
50.05183% 84.35621%,
50.04823% 84.35364%,
50.04419% 84.35128%,
50.03976% 84.34912%,
50.03494% 84.3472%,
50.02979% 84.34553%,
50.02433% 84.34413%,
50.01858% 84.34301%,
50.0126% 84.34219%,
50.00639% 84.34168%,
50% 84.34151%,
49.99361% 84.34168%,
49.9874% 84.34219%,
49.98142% 84.34301%,
49.97567% 84.34413%,
49.97021% 84.34553%,
49.96506% 84.3472%,
49.96024% 84.34912%,
49.95581% 84.35128%,
49.95177% 84.35364%,
49.94817% 84.35621%,
49.94504% 84.35896%,
49.94241% 84.36187%,
49.94031% 84.36493%,
49.93877% 84.36812%,
49.93782% 84.37143%
);
clip-path: polygon(
49.9375% 84.37484%,
49.93782% 84.37825%,
49.93877% 84.38156%,
49.94031% 84.38476%,
49.94241% 84.38782%,
49.94504% 84.39073%,
49.94817% 84.39348%,
49.95177% 84.39605%,
49.95581% 84.39841%,
49.96024% 84.40057%,
49.96506% 84.40248%,
49.97021% 84.40415%,
49.97567% 84.40556%,
49.98142% 84.40668%,
49.9874% 84.4075%,
49.99361% 84.408%,
50% 84.40818%,
50.00639% 84.408%,
50.0126% 84.4075%,
50.01858% 84.40668%,
50.02433% 84.40556%,
50.02979% 84.40415%,
50.03494% 84.40248%,
50.03976% 84.40057%,
50.04419% 84.39841%,
50.04823% 84.39605%,
50.05183% 84.39348%,
50.05496% 84.39073%,
50.05759% 84.38782%,
50.05969% 84.38476%,
50.06123% 84.38156%,
50.06218% 84.37825%,
50.0625% 84.37484%,
50.06218% 84.37143%,
50.06123% 84.36812%,
50.05969% 84.36493%,
50.05759% 84.36187%,
50.05496% 84.35896%,
50.05183% 84.35621%,
50.04823% 84.35364%,
50.04419% 84.35128%,
50.03976% 84.34912%,
50.03494% 84.3472%,
50.02979% 84.34553%,
50.02433% 84.34413%,
50.01858% 84.34301%,
50.0126% 84.34219%,
50.00639% 84.34168%,
50% 84.34151%,
49.99361% 84.34168%,
49.9874% 84.34219%,
49.98142% 84.34301%,
49.97567% 84.34413%,
49.97021% 84.34553%,
49.96506% 84.3472%,
49.96024% 84.34912%,
49.95581% 84.35128%,
49.95177% 84.35364%,
49.94817% 84.35621%,
49.94504% 84.35896%,
49.94241% 84.36187%,
49.94031% 84.36493%,
49.93877% 84.36812%,
49.93782% 84.37143%
);
}
100% {
background: #8ed547;
-webkit-clip-path: polygon(
43.75% 84.37484%,
43.78227% 84.71565%,
43.87698% 85.04662%,
44.03099% 85.36606%,
44.24116% 85.67231%,
44.50434% 85.96368%,
44.8174% 86.23851%,
45.1772% 86.49512%,
45.58058% 86.73183%,
46.02442% 86.94697%,
46.50557% 87.13885%,
47.02088% 87.30582%,
47.56722% 87.44618%,
48.14144% 87.55827%,
48.74041% 87.6404%,
49.36097% 87.69092%,
50% 87.70812%,
50.63902% 87.69092%,
51.25959% 87.6404%,
51.85856% 87.55827%,
52.43278% 87.44618%,
52.97912% 87.30582%,
53.49443% 87.13885%,
53.97558% 86.94697%,
54.41942% 86.73183%,
54.8228% 86.49512%,
55.1826% 86.23851%,
55.49566% 85.96368%,
55.75884% 85.67231%,
55.96901% 85.36606%,
56.12302% 85.04662%,
56.21773% 84.71565%,
56.25% 84.37484%,
56.21773% 84.03403%,
56.12302% 83.70307%,
55.96901% 83.38363%,
55.75884% 83.07738%,
55.49566% 82.786%,
55.1826% 82.51117%,
54.8228% 82.25457%,
54.41942% 82.01786%,
53.97558% 81.80272%,
53.49443% 81.61083%,
52.97912% 81.44387%,
52.43278% 81.30351%,
51.85856% 81.19142%,
51.25959% 81.10928%,
50.63902% 81.05877%,
50% 81.04156%,
49.36097% 81.05877%,
48.74041% 81.10928%,
48.14144% 81.19142%,
47.56722% 81.30351%,
47.02088% 81.44387%,
46.50557% 81.61083%,
46.02442% 81.80272%,
45.58058% 82.01786%,
45.1772% 82.25457%,
44.8174% 82.51117%,
44.50434% 82.786%,
44.24116% 83.07738%,
44.03099% 83.38363%,
43.87698% 83.70307%,
43.78227% 84.03403%
);
clip-path: polygon(
43.75% 84.37484%,
43.78227% 84.71565%,
43.87698% 85.04662%,
44.03099% 85.36606%,
44.24116% 85.67231%,
44.50434% 85.96368%,
44.8174% 86.23851%,
45.1772% 86.49512%,
45.58058% 86.73183%,
46.02442% 86.94697%,
46.50557% 87.13885%,
47.02088% 87.30582%,
47.56722% 87.44618%,
48.14144% 87.55827%,
48.74041% 87.6404%,
49.36097% 87.69092%,
50% 87.70812%,
50.63902% 87.69092%,
51.25959% 87.6404%,
51.85856% 87.55827%,
52.43278% 87.44618%,
52.97912% 87.30582%,
53.49443% 87.13885%,
53.97558% 86.94697%,
54.41942% 86.73183%,
54.8228% 86.49512%,
55.1826% 86.23851%,
55.49566% 85.96368%,
55.75884% 85.67231%,
55.96901% 85.36606%,
56.12302% 85.04662%,
56.21773% 84.71565%,
56.25% 84.37484%,
56.21773% 84.03403%,
56.12302% 83.70307%,
55.96901% 83.38363%,
55.75884% 83.07738%,
55.49566% 82.786%,
55.1826% 82.51117%,
54.8228% 82.25457%,
54.41942% 82.01786%,
53.97558% 81.80272%,
53.49443% 81.61083%,
52.97912% 81.44387%,
52.43278% 81.30351%,
51.85856% 81.19142%,
51.25959% 81.10928%,
50.63902% 81.05877%,
50% 81.04156%,
49.36097% 81.05877%,
48.74041% 81.10928%,
48.14144% 81.19142%,
47.56722% 81.30351%,
47.02088% 81.44387%,
46.50557% 81.61083%,
46.02442% 81.80272%,
45.58058% 82.01786%,
45.1772% 82.25457%,
44.8174% 82.51117%,
44.50434% 82.786%,
44.24116% 83.07738%,
44.03099% 83.38363%,
43.87698% 83.70307%,
43.78227% 84.03403%
);
}
}
/* Segundo paso */
@-webkit-keyframes SegundoPasoPrimero {
0% {
background: #126c20;
}
40% {
background: #126c20;
}
40.01% {
background: #8ed547;
}
100% {
background: #8ed547;
}
}
@keyframes SegundoPasoPrimero {
0% {
background: #126c20;
}
40% {
background: #126c20;
}
40.01% {
background: #8ed547;
}
100% {
background: #8ed547;
}
}
@-webkit-keyframes SegundoPasoSegundo {
0% {
background: #8ed547;
}
80% {
background: #8ed547;
}
80.01% {
background: #126c20;
-webkit-clip-path: polygon(
43.75% 84.37484%,
43.78227% 84.71565%,
43.87698% 85.04662%,
44.03099% 85.36606%,
44.24116% 85.67231%,
44.50434% 85.96368%,
44.8174% 86.23851%,
45.1772% 86.49512%,
45.58058% 86.73183%,
46.02442% 86.94697%,
46.50557% 87.13885%,
47.02088% 87.30582%,
47.56722% 87.44618%,
48.14144% 87.55827%,
48.74041% 87.6404%,
49.36097% 87.69092%,
50% 87.70812%,
50.63902% 87.69092%,
51.25959% 87.6404%,
51.85856% 87.55827%,
52.43278% 87.44618%,
52.97912% 87.30582%,
53.49443% 87.13885%,
53.97558% 86.94697%,
54.41942% 86.73183%,
54.8228% 86.49512%,
55.1826% 86.23851%,
55.49566% 85.96368%,
55.75884% 85.67231%,
55.96901% 85.36606%,
56.12302% 85.04662%,
56.21773% 84.71565%,
56.25% 84.37484%,
56.21773% 84.03403%,
56.12302% 83.70307%,
55.96901% 83.38363%,
55.75884% 83.07738%,
55.49566% 82.786%,
55.1826% 82.51117%,
54.8228% 82.25457%,
54.41942% 82.01786%,
53.97558% 81.80272%,
53.49443% 81.61083%,
52.97912% 81.44387%,
52.43278% 81.30351%,
51.85856% 81.19142%,
51.25959% 81.10928%,
50.63902% 81.05877%,
50% 81.04156%,
49.36097% 81.05877%,
48.74041% 81.10928%,
48.14144% 81.19142%,
47.56722% 81.30351%,
47.02088% 81.44387%,
46.50557% 81.61083%,
46.02442% 81.80272%,
45.58058% 82.01786%,
45.1772% 82.25457%,
44.8174% 82.51117%,
44.50434% 82.786%,
44.24116% 83.07738%,
44.03099% 83.38363%,
43.87698% 83.70307%,
43.78227% 84.03403%
);
clip-path: polygon(
43.75% 84.37484%,
43.78227% 84.71565%,
43.87698% 85.04662%,
44.03099% 85.36606%,
44.24116% 85.67231%,
44.50434% 85.96368%,
44.8174% 86.23851%,
45.1772% 86.49512%,
45.58058% 86.73183%,
46.02442% 86.94697%,
46.50557% 87.13885%,
47.02088% 87.30582%,
47.56722% 87.44618%,
48.14144% 87.55827%,
48.74041% 87.6404%,
49.36097% 87.69092%,
50% 87.70812%,
50.63902% 87.69092%,
51.25959% 87.6404%,
51.85856% 87.55827%,
52.43278% 87.44618%,
52.97912% 87.30582%,
53.49443% 87.13885%,
53.97558% 86.94697%,
54.41942% 86.73183%,
54.8228% 86.49512%,
55.1826% 86.23851%,
55.49566% 85.96368%,
55.75884% 85.67231%,
55.96901% 85.36606%,
56.12302% 85.04662%,
56.21773% 84.71565%,
56.25% 84.37484%,
56.21773% 84.03403%,
56.12302% 83.70307%,
55.96901% 83.38363%,
55.75884% 83.07738%,
55.49566% 82.786%,
55.1826% 82.51117%,
54.8228% 82.25457%,
54.41942% 82.01786%,
53.97558% 81.80272%,
53.49443% 81.61083%,
52.97912% 81.44387%,
52.43278% 81.30351%,
51.85856% 81.19142%,
51.25959% 81.10928%,
50.63902% 81.05877%,
50% 81.04156%,
49.36097% 81.05877%,
48.74041% 81.10928%,
48.14144% 81.19142%,
47.56722% 81.30351%,
47.02088% 81.44387%,
46.50557% 81.61083%,
46.02442% 81.80272%,
45.58058% 82.01786%,
45.1772% 82.25457%,
44.8174% 82.51117%,
44.50434% 82.786%,
44.24116% 83.07738%,
44.03099% 83.38363%,
43.87698% 83.70307%,
43.78227% 84.03403%
);
}
100% {
background: #126c20;
-webkit-clip-path: polygon(
43.75% 84.37484%,
43.78227% 84.71565%,
43.87698% 85.04662%,
44.03099% 85.36606%,
44.24116% 85.67231%,
44.50434% 85.96368%,
44.8174% 86.23851%,
45.1772% 86.49512%,
45.58058% 86.73183%,
46.02442% 86.94697%,
46.50557% 87.13885%,
47.02088% 87.30582%,
47.56722% 87.44618%,
48.14144% 87.55827%,
48.74041% 87.6404%,
49.36097% 87.69092%,
50% 87.70812%,
50.63902% 87.69092%,
51.25959% 87.6404%,
51.85856% 87.55827%,
52.43278% 87.44618%,
52.97912% 87.30582%,
53.49443% 87.13885%,
53.97558% 86.94697%,
54.41942% 86.73183%,
54.8228% 86.49512%,
55.1826% 86.23851%,
55.49566% 85.96368%,
55.75884% 85.67231%,
55.96901% 85.36606%,
56.12302% 85.04662%,
56.21773% 84.71565%,
56.25% 84.37484%,
56.21773% 84.03403%,
56.12302% 83.70307%,
55.96901% 83.38363%,
55.75884% 83.07738%,
55.49566% 82.786%,
55.1826% 82.51117%,
54.8228% 82.25457%,
54.41942% 82.01786%,
53.97558% 81.80272%,
53.49443% 81.61083%,
52.97912% 81.44387%,
52.43278% 81.30351%,
51.85856% 81.19142%,
51.25959% 81.10928%,
50.63902% 81.05877%,
50% 81.04156%,
49.36097% 81.05877%,
48.74041% 81.10928%,
48.14144% 81.19142%,
47.56722% 81.30351%,
47.02088% 81.44387%,
46.50557% 81.61083%,
46.02442% 81.80272%,
45.58058% 82.01786%,
45.1772% 82.25457%,
44.8174% 82.51117%,
44.50434% 82.786%,
44.24116% 83.07738%,
44.03099% 83.38363%,
43.87698% 83.70307%,
43.78227% 84.03403%
);
clip-path: polygon(
43.75% 84.37484%,
43.78227% 84.71565%,
43.87698% 85.04662%,
44.03099% 85.36606%,
44.24116% 85.67231%,
44.50434% 85.96368%,
44.8174% 86.23851%,
45.1772% 86.49512%,
45.58058% 86.73183%,
46.02442% 86.94697%,
46.50557% 87.13885%,
47.02088% 87.30582%,
47.56722% 87.44618%,
48.14144% 87.55827%,
48.74041% 87.6404%,
49.36097% 87.69092%,
50% 87.70812%,
50.63902% 87.69092%,
51.25959% 87.6404%,
51.85856% 87.55827%,
52.43278% 87.44618%,
52.97912% 87.30582%,
53.49443% 87.13885%,
53.97558% 86.94697%,
54.41942% 86.73183%,
54.8228% 86.49512%,
55.1826% 86.23851%,
55.49566% 85.96368%,
55.75884% 85.67231%,
55.96901% 85.36606%,
56.12302% 85.04662%,
56.21773% 84.71565%,
56.25% 84.37484%,
56.21773% 84.03403%,
56.12302% 83.70307%,
55.96901% 83.38363%,
55.75884% 83.07738%,
55.49566% 82.786%,
55.1826% 82.51117%,
54.8228% 82.25457%,
54.41942% 82.01786%,
53.97558% 81.80272%,
53.49443% 81.61083%,
52.97912% 81.44387%,
52.43278% 81.30351%,
51.85856% 81.19142%,
51.25959% 81.10928%,
50.63902% 81.05877%,
50% 81.04156%,
49.36097% 81.05877%,
48.74041% 81.10928%,
48.14144% 81.19142%,
47.56722% 81.30351%,
47.02088% 81.44387%,
46.50557% 81.61083%,
46.02442% 81.80272%,
45.58058% 82.01786%,
45.1772% 82.25457%,
44.8174% 82.51117%,
44.50434% 82.786%,
44.24116% 83.07738%,
44.03099% 83.38363%,
43.87698% 83.70307%,
43.78227% 84.03403%
);
}
}
@keyframes SegundoPasoSegundo {
0% {
background: #8ed547;
}
80% {
background: #8ed547;
}
80.01% {
background: #126c20;
-webkit-clip-path: polygon(
43.75% 84.37484%,
43.78227% 84.71565%,
43.87698% 85.04662%,
44.03099% 85.36606%,
44.24116% 85.67231%,
44.50434% 85.96368%,
44.8174% 86.23851%,
45.1772% 86.49512%,
45.58058% 86.73183%,
46.02442% 86.94697%,
46.50557% 87.13885%,
47.02088% 87.30582%,
47.56722% 87.44618%,
48.14144% 87.55827%,
48.74041% 87.6404%,
49.36097% 87.69092%,
50% 87.70812%,
50.63902% 87.69092%,
51.25959% 87.6404%,
51.85856% 87.55827%,
52.43278% 87.44618%,
52.97912% 87.30582%,
53.49443% 87.13885%,
53.97558% 86.94697%,
54.41942% 86.73183%,
54.8228% 86.49512%,
55.1826% 86.23851%,
55.49566% 85.96368%,
55.75884% 85.67231%,
55.96901% 85.36606%,
56.12302% 85.04662%,
56.21773% 84.71565%,
56.25% 84.37484%,
56.21773% 84.03403%,
56.12302% 83.70307%,
55.96901% 83.38363%,
55.75884% 83.07738%,
55.49566% 82.786%,
55.1826% 82.51117%,
54.8228% 82.25457%,
54.41942% 82.01786%,
53.97558% 81.80272%,
53.49443% 81.61083%,
52.97912% 81.44387%,
52.43278% 81.30351%,
51.85856% 81.19142%,
51.25959% 81.10928%,
50.63902% 81.05877%,
50% 81.04156%,
49.36097% 81.05877%,
48.74041% 81.10928%,
48.14144% 81.19142%,
47.56722% 81.30351%,
47.02088% 81.44387%,
46.50557% 81.61083%,
46.02442% 81.80272%,
45.58058% 82.01786%,
45.1772% 82.25457%,
44.8174% 82.51117%,
44.50434% 82.786%,
44.24116% 83.07738%,
44.03099% 83.38363%,
43.87698% 83.70307%,
43.78227% 84.03403%
);
clip-path: polygon(
43.75% 84.37484%,
43.78227% 84.71565%,
43.87698% 85.04662%,
44.03099% 85.36606%,
44.24116% 85.67231%,
44.50434% 85.96368%,
44.8174% 86.23851%,
45.1772% 86.49512%,
45.58058% 86.73183%,
46.02442% 86.94697%,
46.50557% 87.13885%,
47.02088% 87.30582%,
47.56722% 87.44618%,
48.14144% 87.55827%,
48.74041% 87.6404%,
49.36097% 87.69092%,
50% 87.70812%,
50.63902% 87.69092%,
51.25959% 87.6404%,
51.85856% 87.55827%,
52.43278% 87.44618%,
52.97912% 87.30582%,
53.49443% 87.13885%,
53.97558% 86.94697%,
54.41942% 86.73183%,
54.8228% 86.49512%,
55.1826% 86.23851%,
55.49566% 85.96368%,
55.75884% 85.67231%,
55.96901% 85.36606%,
56.12302% 85.04662%,
56.21773% 84.71565%,
56.25% 84.37484%,
56.21773% 84.03403%,
56.12302% 83.70307%,
55.96901% 83.38363%,
55.75884% 83.07738%,
55.49566% 82.786%,
55.1826% 82.51117%,
54.8228% 82.25457%,
54.41942% 82.01786%,
53.97558% 81.80272%,
53.49443% 81.61083%,
52.97912% 81.44387%,
52.43278% 81.30351%,
51.85856% 81.19142%,
51.25959% 81.10928%,
50.63902% 81.05877%,
50% 81.04156%,
49.36097% 81.05877%,
48.74041% 81.10928%,
48.14144% 81.19142%,
47.56722% 81.30351%,
47.02088% 81.44387%,
46.50557% 81.61083%,
46.02442% 81.80272%,
45.58058% 82.01786%,
45.1772% 82.25457%,
44.8174% 82.51117%,
44.50434% 82.786%,
44.24116% 83.07738%,
44.03099% 83.38363%,
43.87698% 83.70307%,
43.78227% 84.03403%
);
}
100% {
background: #126c20;
-webkit-clip-path: polygon(
43.75% 84.37484%,
43.78227% 84.71565%,
43.87698% 85.04662%,
44.03099% 85.36606%,
44.24116% 85.67231%,
44.50434% 85.96368%,
44.8174% 86.23851%,
45.1772% 86.49512%,
45.58058% 86.73183%,
46.02442% 86.94.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0