1.triangle {
2  background-color: transparent;
3  height: 0px;
4  width: 0px;
5  border-style: solid;
6  border-width: 50px 50px 50px 50px;
7  border-radius: 2px;
8  border-color: #00ff83 #00e676 #00cc69 #00e676;
9  animation: animtrgl 3s infinite ease;
10}
11
12.text {
13  font-family: 'Staatliches', cursive;
14  color: white;
15  font-size: 25px;
16  width: 250px;
17  text-align: center;
18  display: block;
19  height: 50px;
20  position: absolute;
21  animation: textload 3s infinite ease;
22  text-shadow: 0 0 4px black;
23}
24
25@keyframes textload {
26  0% {
27    top: calc(50% + 100px);
28  }
29
30  25% {
31    top: calc(50% + 85px);
32  }
33
34  50% {
35    top: calc(50% + 100px);
36  }
37
38  75% {
39    top: calc(50% + 85px);
40  }
41
42  100% {
43    top: calc(50% + 100px);
44  }
45}
46
47@keyframes animtrgl {
48  0% {
49    border-width: 50px 75px 50px 25px;
50    transform: scale(2);
51  }
52
53  25% {
54    border-width: 25px 50px 75px 50px;
55    transform: scale(1.75);
56  }
57
58  50% {
59    border-width: 50px 25px 50px 75px;
60    transform: scale(2);
61  }
62
63  75% {
64    border-width: 75px 50px 25px 50px;
65    transform: scale(1.75);
66  }
67
68  100% {
69    border-width: 50px 75px 50px 25px;
70    transform: scale(2);
71  }
72}