Twitch App Loading Animation

В редакторе

Twitch App Loading Animation

Brain_Script
1350
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; } }
Войдите для добавления комментария.
Нет комментариев
Яндекс.Метрика Яндекс.Метрика