Twitch App Loading Animation
В редакторе
Twitch App Loading Animation
Brain_Script
1356
2019-07-12 15:43:18
<div class='twitchLoader'>
<div class='cube'></div>
<div class='cube'></div>
<div class='cube'></div>
<div class='cube'></div>
<div class='cube'></div>
</div>
body {
background-color: #17141F;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
min-width: 7em;
}
.twitchLoader {
width: 100px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.twitchLoader .cube {
height: 20px;
width: 20px;
margin: 15px;
background-color: #C4BECB;
float: right;
opacity: 0;
outline: 1px solid transparent;
}
.twitchLoader .cube:nth-child(1) {
background-color: #6441A4;
-webkit-animation: purpleAnim 2s infinite 0.55s;
animation: purpleAnim 2s infinite 0.55s;
position: fixed;
}
.twitchLoader .cube:nth-child(2) {
-webkit-animation: cubeAnim1 2s infinite cubic-bezier(0.4, 0, 0.2, 1) 0.26s;
animation: cubeAnim1 2s infinite cubic-bezier(0.4, 0, 0.2, 1) 0.26s;
}
.twitchLoader .cube:nth-child(3) {
-webkit-animation: cubeAnim4 2s infinite cubic-bezier(0.4, 0, 0.2, 1) 1.755s;
animation: cubeAnim4 2s infinite cubic-bezier(0.4, 0, 0.2, 1) 1.755s;
}
.twitchLoader .cube:nth-child(4) {
-webkit-animation: cubeAnim2 2s infinite cubic-bezier(0.4, 0, 0.2, 1) 0.741s;
animation: cubeAnim2 2s infinite cubic-bezier(0.4, 0, 0.2, 1) 0.741s;
}
.twitchLoader .cube:nth-child(5) {
-webkit-animation: cubeAnim3 2s infinite cubic-bezier(0.4, 0, 0.2, 1) 1.235s;
animation: cubeAnim3 2s infinite cubic-bezier(0.4, 0, 0.2, 1) 1.235s;
}
@-webkit-keyframes cubeAnim1 {
0% {
opacity: 0;
-webkit-transform: translate(0, -50px);
transform: translate(0, -50px);
}
40% {
opacity: 1;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
100% {
opacity: 0;
}
}
@keyframes cubeAnim1 {
0% {
opacity: 0;
-webkit-transform: translate(0, -50px);
transform: translate(0, -50px);
}
40% {
opacity: 1;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
100% {
opacity: 0;
}
}
@-webkit-keyframes cubeAnim2 {
0% {
opacity: 0;
-webkit-transform: translate(50px, 0);
transform: translate(50px, 0);
}
40% {
opacity: 1;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
100% {
opacity: 0;
}
}
@keyframes cubeAnim2 {
0% {
opacity: 0;
-webkit-transform: translate(50px, 0);
transform: translate(50px, 0);
}
40% {
opacity: 1;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
100% {
opacity: 0;
}
}
@-webkit-keyframes cubeAnim3 {
0% {
opacity: 0;
-webkit-transform: translate(0, 50px);
transform: translate(0, 50px);
}
40% {
opacity: 1;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
100% {
opacity: 0;
}
}
@keyframes cubeAnim3 {
0% {
opacity: 0;
-webkit-transform: translate(0, 50px);
transform: translate(0, 50px);
}
40% {
opacity: 1;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
100% {
opacity: 0;
}
}
@-webkit-keyframes cubeAnim4 {
0% {
opacity: 0;
-webkit-transform: translate(-50px, 0);
transform: translate(-50px, 0);
}
40% {
opacity: 1;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
100% {
opacity: 0;
}
}
@keyframes cubeAnim4 {
0% {
opacity: 0;
-webkit-transform: translate(-50px, 0);
transform: translate(-50px, 0);
}
40% {
opacity: 1;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
100% {
opacity: 0;
}
}
@-webkit-keyframes purpleAnim {
0% {
-webkit-transform: translate(50px, 0px);
transform: translate(50px, 0px);
opacity: 1;
}
25% {
-webkit-transform: translate(50px, 50px);
transform: translate(50px, 50px);
}
50% {
-webkit-transform: translate(0px, 50px);
transform: translate(0px, 50px);
}
75% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
100% {
-webkit-transform: translate(50px, 0px);
transform: translate(50px, 0px);
opacity: 1;
}
}
@keyframes purpleAnim {
0% {
-webkit-transform: translate(50px, 0px);
transform: translate(50px, 0px);
opacity: 1;
}
25% {
-webkit-transform: translate(50px, 50px);
transform: translate(50px, 50px);
}
50% {
-webkit-transform: translate(0px, 50px);
transform: translate(0px, 50px);
}
75% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
100% {
-webkit-transform: translate(50px, 0px);
transform: translate(50px, 0px);
opacity: 1;
}
}
Войдите для добавления комментария.