html, body {
overflow-x:hidden;
overflow-y:hidden;
}
body{
min-width: 21rem;
box-sizing: border-box;
margin: 0 auto;
padding: 0;
background-color: black;
color: aquamarine;
position: absolute;
width: 100%;
}
:root {
--color-font: aquamarine;
--color-text-shadow: #2ca9c9;
--color-text-stroke: rgb(7, 37, 94);
--color-1: red;
--color-2: orangered;
--color-3: orange;
--color-4: yellow;
--color-5: greenyellow;
--color-6: seagreen;
--color-7: darkgreen;
--color-8: darkblue;
--color-9: blue;
--color-10: aqua;
--color-11: lightskyblue;
--color-12: lightseagreen;
--color-13: mediumseagreen;
--color-14: lightgreen;
--color-15: greenyellow;
--color-16: yellow;
--color-17: orange;
--color-18: orangered;
}
.button{
all: unset;
position: absolute;
color: white;
font-size: 4vw;
font-weight: bold;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-image: linear-gradient(to right, red, orange, yellow,
green, blue, indigo, violet);
border: .18rem solid white;
border-radius: .3rem;
z-index: 15;
padding: 0.2rem 0.5rem 0.2rem 0.5rem;
cursor: pointer;
}
h1{
margin: 0;
padding: 0;
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.5rem;
-webkit-text-stroke-width: .04rem;
-webkit-text-stroke-color: var(--color-text-stroke);
text-shadow:
.01rem -.01rem 0rem var(--color-text-shadow),
.02rem -.02rem 0rem var(--color-text-shadow),
.03rem -.03rem .0003rem var(--color-text-shadow),
.04rem -.04rem .0003rem var(--color-text-shadow),
.05rem -.05rem .0003rem var(--color-text-shadow),
.06rem -.06rem .0003rem var(--color-text-shadow),
.07rem -.07rem .0003rem var(--color-text-shadow),
.08rem -.08rem .0003rem var(--color-text-shadow),
.09rem -.09rem .0003rem var(--color-text-shadow),
.10rem -.10rem .0003rem var(--color-text-shadow),
.11rem -.11rem .0003rem var(--color-text-shadow),
.12rem -.12rem 0rem var(--color-text-shadow),
.13rem -.13rem 0rem var(--color-text-shadow),
.14rem -.14rem 0rem var(--color-text-stroke),
.15rem -.15rem 0rem var(--color-text-stroke),
.16rem -.16rem 0rem var(--color-text-stroke),
.17rem -.17rem 0rem var(--color-text-stroke)
}
@media (min-width: 40em){
h1{
font-size: 3rem;
-webkit-text-stroke-width: .04rem;
-webkit-text-stroke-color: var(--color-text-stroke);
text-shadow:
.01rem -.01rem 0rem var(--color-text-stroke),
.02rem -.02rem 0rem var(--color-text-shadow),
.03rem -.03rem .0005rem var(--color-text-shadow),
.04rem -.04rem .0005rem var(--color-text-shadow),
.05rem -.05rem .0005rem var(--color-text-shadow),
.06rem -.06rem .0005rem var(--color-text-shadow),
.07rem -.07rem .0005rem var(--color-text-shadow),
.08rem -.08rem .0005rem var(--color-text-shadow),
.09rem -.09rem .0005rem var(--color-text-shadow),
.10rem -.10rem .0005rem var(--color-text-shadow),
.11rem -.11rem .0005rem var(--color-text-shadow),
.12rem -.12rem .0005rem var(--color-text-shadow),
.13rem -.13rem .0005rem var(--color-text-shadow),
.14rem -.14rem .0005rem var(--color-text-shadow),
.15rem -.15rem .0005rem var(--color-text-shadow),
.16rem -.16rem 0rem var(--color-text-shadow),
.17rem -.17rem 0rem var(--color-text-stroke),
.18rem -.18rem 0rem var(--color-text-stroke),
.19rem -.19rem 0rem var(--color-text-stroke),
.20rem -.20rem 0rem var(--color-text-stroke),
.21rem -.21rem 0rem var(--color-text-stroke)
}
}
@media (min-width: 53em){
h1{
font-size: 4.5rem;
-webkit-text-stroke-width: .04rem;
-webkit-text-stroke-color: var(--color-text-stroke);
text-shadow:
.01rem -.01rem 0rem var(--color-text-stroke),
.02rem -.02rem 0rem var(--color-text-shadow),
.03rem -.03rem .0005rem var(--color-text-shadow),
.04rem -.04rem .0005rem var(--color-text-shadow),
.05rem -.05rem .0005rem var(--color-text-shadow),
.06rem -.06rem .0005rem var(--color-text-shadow),
.07rem -.07rem .0005rem var(--color-text-shadow),
.08rem -.08rem .0005rem var(--color-text-shadow),
.09rem -.09rem .0005rem var(--color-text-shadow),
.10rem -.10rem .0005rem var(--color-text-shadow),
.11rem -.11rem .0005rem var(--color-text-shadow),
.12rem -.12rem .0005rem var(--color-text-shadow),
.13rem -.13rem .0005rem var(--color-text-shadow),
.14rem -.14rem .0005rem var(--color-text-shadow),
.15rem -.15rem .0005rem var(--color-text-shadow),
.16rem -.16rem 0rem var(--color-text-shadow),
.17rem -.17rem 0rem var(--color-text-stroke),
.18rem -.18rem 0rem var(--color-text-stroke),
.19rem -.19rem 0rem var(--color-text-stroke),
.20rem -.20rem 0rem var(--color-text-stroke),
.21rem -.21rem 0rem var(--color-text-stroke)
}
}
@media (min-width: 72em){
h1{
font-size: 6rem;
-webkit-text-stroke-width: .04rem;
-webkit-text-stroke-color: var(--color-text-stroke);
text-shadow:
.01rem -.01rem 0rem var(--color-text-stroke),
.02rem -.02rem 0rem var(--color-text-shadow),
.03rem -.03rem .0005rem var(--color-text-shadow),
.04rem -.04rem .0005rem var(--color-text-shadow),
.05rem -.05rem .0005rem var(--color-text-shadow),
.06rem -.06rem .0005rem var(--color-text-shadow),
.07rem -.07rem .0005rem var(--color-text-shadow),
.08rem -.08rem .0005rem var(--color-text-shadow),
.09rem -.09rem .0005rem var(--color-text-shadow),
.10rem -.10rem .0005rem var(--color-text-shadow),
.11rem -.11rem .0005rem var(--color-text-shadow),
.12rem -.12rem .0005rem var(--color-text-shadow),
.13rem -.13rem .0005rem var(--color-text-shadow),
.14rem -.14rem .0005rem var(--color-text-shadow),
.15rem -.15rem .0005rem var(--color-text-shadow),
.16rem -.16rem 0rem var(--color-text-shadow),
.17rem -.17rem 0rem var(--color-text-stroke),
.18rem -.18rem 0rem var(--color-text-stroke),
.19rem -.19rem 0rem var(--color-text-stroke),
.20rem -.20rem 0rem var(--color-text-stroke),
.21rem -.21rem 0rem var(--color-text-stroke)
}
}
.z-index{
position: relative;
z-index: 1;
}
h1 span{
display: inline-block;
transform: scale(0);
}
.acrobatics{
display: inline-block;
}
/* ****** font animation pop up ***************************************************************************** */
.start-animation-pop-up{
animation: pop-up 2s ease-in forwards;
}
.start-animation-jump-and-spin{
animation: jump-and-spin 3s forwards;
}
@keyframes pop-up {
0%{
transform: scale(0);
}
100%{
transform: scale(1);
}
}
@keyframes jump-and-spin{
0%{
transform: translateY(0%);
}
50%{
transform: rotate3d(0,1,0,180deg) translateY(-100%);
}
100%{
transform: rotate3d(0,1,0,360deg) translateY(0%);
}
}
/* ****** font animation tower build up***************************************************************************** */
/* letter R */
.tower-hire-r{
position: relative;
z-index: 3;
animation: jump-r-x 3s forwards;
}
.tower-hire-r::after{
content: 'R';
display: inline-block;
animation: jump-r-y 3s forwards;
}
@keyframes jump-r-x {
85%{
transform: translateX(65%)
}
100%{
animation-timing-function: ease-out;
transform: translateX(128%)
}
}
@keyframes jump-r-y {
85%{
transform: translateY(-100%);
}
100%{
animation-timing-function: ease-out;
transform: translateY(-1.08rem);
}
}
/* letter I */
.tower-hire-i{
position: relative;
z-index: 6;
animation: jump-i-x 3s forwards;
}
.tower-hire-i::after{
content: 'I';
display: inline-block;
animation: jump-i-y 3s forwards;
}
@keyframes jump-i-x {
85%{
transform: translateX(390%);
}
100%{
animation-timing-function: ease-out;
transform: translateX(413%);
}
}
@keyframes jump-i-y {
85%{
transform: translateY(-165%);
}
100%{
animation-timing-function: ease-out;
transform: translateY(-2.15rem);
}
}
/* letter H */
.tower-hire-h{
position: relative;
z-index: 9;
animation: jump-h-x 5s forwards;
}
.tower-hire-h::after{
content: 'H';
display: inline-block;
animation: jump-h-y 5s forwards;
}
@keyframes jump-h-x {
40%{
transform: translateX(150%);
}
70%{
transform: translateX(280%);
}
100%{
transform: translateX(325%);
}
}
@keyframes jump-h-y {
15%{
animation-timing-function: ease-out;
transform: translateY(-50%);
}
40%{
animation-timing-function: ease-out;
transform: translateY(0%);
}
50%{
transform: translateY(-220%);
}
70%{
animation-timing-function: ease-out;
transform: translateY(-3.4rem) rotate(20deg);
}
90%{
transform: translateY(-220%);
}
100%{
transform: translateY(-3.5rem) rotate(-40deg);
}
}
@media (min-width: 40em){
@keyframes jump-r-y {
85%{
transform: translateY(-100%);
}
100%{
animation-timing-function: ease-out;
transform: translateY(-2.1rem);
}
}
@keyframes jump-i-y {
85%{
transform: translateY(-165%);
}
100%{
animation-timing-function: ease-out;
transform: translateY(-4.2rem);
}
}
@keyframes jump-h-y {
15%{
animation-timing-function: ease-out;
transform: translateY(-50%);
}
40%{
animation-timing-function: ease-out;
transform: translateY(0%);
}
50%{
transform: translateY(-220%);
}
70%{
animation-timing-function: ease-out;
transform: translateY(-6.65rem) rotate(20deg);
}
90%{
transform: translateY(-215%);
}
100%{
transform: translateY(-6.78rem) rotate(-40deg);
}
}
}
@media (min-width: 53em){
@keyframes jump-r-y {
85%{
transform: translateY(-100%);
}
100%{
animation-timing-function: ease-out;
transform: translateY(-3.13rem);
}
}
@keyframes jump-i-x {
85%{
transform: translateX(390%);
}
100%{
animation-timing-function: ease-out;
transform: translateX(410%);
}
}
@keyframes jump-i-y {
85%{
transform: translateY(-165%);
}
100%{
animation-timing-function: ease-out;
transform: translateY(-6.24rem);
}
}
@keyframes jump-h-x {
40%{
transform: translateX(150%);
}
70%{
transform: translateX(276%);
}
100%{
transform: translateX(318%);
}
}
@keyframes jump-h-y {
15%{
animation-timing-function: ease-out;
transform: translateY(-50%);
}
40%{
animation-timing-function: ease-out;
transform: translateY(0%);
}
50%{
transform: translateY(-220%);
}
70%{
animation-timing-function: ease-out;
transform: translateY(-9.85rem) rotate(20deg);
}
90%{
transform: translateY(-220%);
}
100%{
transform: translateY(-10.04rem) rotate(-40deg);
}
}
}
@media (min-width: 72em){
@keyframes jump-r-y {
85%{
transform: translateY(-100%);
}
100%{
animation-timing-function: ease-out;
transform: translateY(-4.05rem);
}
}
@keyframes jump-i-y {
85%{
transform: translateY(-165%);
}
100%{
animation-timing-function: ease-out;
transform: translateY(-8.05rem);
}
}
@keyframes jump-h-y {
15%{
animation-timing-function: ease-out;
transform: translateY(-50%);
}
40%{
animation-timing-function: ease-out;
transform: translateY(0%);
}
50%{
transform: translateY(-220%);
}
70%{
animation-timing-function: ease-out;
transform: translateY(-12.7rem) rotate(20deg);
}
90%{
transform: translateY(-220%);
}
100%{
transform: translateY(-13rem) rotate(-40deg);
}
}
}
/* ****** font me animation jumping ***************************************************************************** */
.request-dance{
animation: dance 2s ease-in-out forwards;
}
@keyframes dance {
9%{
transform: translate(0%, 0%)
}
18%{
transform: translate(0%, -5vw)
}
27%{
transform: translate(0%, 0%)
}
36%{
transform: translate(0%, -5vw)
}
45%{
transform: translate(0%, 0%)
}
54%{
transform: translate(0%, -5vw)
}
63%{
transform: translate(0%, 0%)
}
72%{
transform: translate(0%, -5vw)
}
81%{
transform: translate(0%, 0%)
}
90%{
transform: translate(0%, -5vw)
}
100%{
transform: translate(0%, 0%)
}
}
/******* acrobatics ******************************************************************************/
.acrobatics{
transform-origin: -60% center;
}
/* the word me jump to the right */
.m-from-the-word-me{
position: relative;
z-index: 9;
animation: jump-to-right-x 1.5s ease-in forwards;
}
.m-from-the-word-me::after{
content: 'M';
display: inline-block;
animation: jump-to-right-y 1.5s ease-in forwards;
}
.e-from-the-word-me{
position: relative;
z-index: 9;
animation: jump-to-right-x 1.5s ease-in forwards;
}
.e-from-the-word-me::after{
content: 'E';
display: inline-block;
animation: jump-to-right-y 1.5s ease-in forwards;
}
@keyframes jump-to-right-x {
100%{
animation-timing-function: ease-out;
transform: translateX(10vw);
}
}
@keyframes jump-to-right-y {
50%{
transform: translateY(-5vw);
}
100%{
animation-timing-function: ease-out;
transform: translateY(0vw);
}
}
/************************** swing arround ***************************************/
.swing-arround{
animation: swing-arround 4.4s forwards;
}
@keyframes swing-arround {
0%{
transform: rotateZ(-0deg);
}
50%{
transform: rotateZ(-180deg);
}
100%{
transform: rotateZ(-360deg);
}
}
.contrary-swing-arround{
animation: contrary-swing-arround 4.4s forwards;
}
@keyframes contrary-swing-arround{
50%{
transform: rotateX(180deg);
}
100%{
transform: rotateX(360deg);
}
}
.swing-arround-e-to-the-left{
animation: swing-arround-e-to-the-left 4.4s forwards;
}
@keyframes swing-arround-e-to-the-left {
0%{
transform: translateX(10vw);
}
50%{
transform: rotateX(180deg) rotateY(180deg);
}
100%{
transform: rotateX(360deg) translateX(10vw) rotateY(0deg);
}
}
.swing-arround-m-to-the-left{
animation: swing-arround-m-to-the-left 4.4s forwards;
}
@keyframes swing-arround-m-to-the-left {
0%{
transform: translateX(10vw);
}
50%{
transform: translateX(3.3rem) rotateX(-180deg) rotateY(-180deg);
}
100%{
transform: translateX(10vw) rotateX(360deg) rotateY(0deg);
}
}
@media (min-width: 40em){
@keyframes swing-arround-m-to-the-left {
0%{
transform: translateX(10vw);
}
50%{
transform: translateX(6.4rem) rotateX(-180deg) rotateY(-180deg);
}
100%{
transform: translateX(10vw) rotateX(360deg) rotateY(0deg);
}
}
}
@media (min-width: 53em){
@keyframes swing-arround-m-to-the-left {
0%{
transform: translateX(10vw);
}
50%{
transform: translateX(9.5rem) rotateX(-180deg) rotateY(-180deg);
}
100%{
transform: translateX(10vw) rotateX(360deg) rotateY(0deg);
}
}
}
@media (min-width: 72em){
@keyframes swing-arround-m-to-the-left {
0%{
transform: translateX(10vw);
}
50%{
transform: translateX(12.9rem) rotateX(-180deg) rotateY(-180deg);
}
100%{
transform: translateX(10vw) rotateX(360deg) rotateY(0deg);
}
}
}
/******************* the word me jump back to origin / to the left **********************************/
.m-from-the-word-me-to-left{
position: relative;
z-index: 9;
animation: jump-to-left-x 1.5s ease-in forwards;
}
.m-from-the-word-me-to-left::after{
content: 'M';
display: inline-block;
animation: jump-to-left-y 1.5s ease-in forwards;
}
.e-from-the-word-me-to-left{
position: relative;
z-index: 9;
animation: jump-to-left-x 1.5s ease-in forwards;
}
.e-from-the-word-me-to-left::after{
content: 'E';
display: inline-block;
animation: jump-to-left-y 1.5s ease-in forwards;
}
@keyframes jump-to-left-x {
0%{
transform: translateX(10vw);
}
100%{
animation-timing-function: ease-out;
transform: translateX(0vw);
}
}
@keyframes jump-to-left-y {
50%{
transform: translateY(-5vw);
}
100%{
animation-timing-function: ease-out;
transform: translateY(0rem);
}
}
/* ****** font animation tower dismantle ***************************************************************************** */
/* letter H */
.dismantle-tower-hire-h{
position: relative;
z-index: 9;
animation: dismantle-jump-h-x 4s forwards;
}
.dismantle-tower-hire-h::after{
content: 'H';
display: inline-block;
animation: dismantle-jump-h-y 4s forwards;
}
@keyframes dismantle-jump-h-x {
0%{
transform: translateX(325%);
}
30%{
transform: translateX(290%);
}
60%{
transform: translateX(50%);
}
100%{
animation-timing-function: ease-out;
transform: translateX(0%);
}
}
@keyframes dismantle-jump-h-y {
0%{
transform: translateY(-3.5rem) rotate(-40deg);
}
10%{
transform: translateY(-220%);
}
30%{
transform: translateY(-3.4rem) rotate(20deg);
}
50%{
animation-timing-function: ease-out;
transform: translateY(-220%);
}
60%{
transform: translateY(0%);
}
85%{
transform: translateY(-50%);
}
100%{
animation-timing-function: ease-out;
transform: translateY(0%);
}
}
/* letter I */
.dismantle-tower-hire-i{
position: relative;
z-index: 6;
animation: dismantle-jump-i-x 2s forwards;
}
.dismantle-tower-hire-i::after{
content: 'I';
display: inline-block;
animation: dismantle-jump-i-y 2s forwards;
}
@keyframes dismantle-jump-i-x {
0%{
transform: translateX(424%);
}
75%{
transform: translateX(50%);
}
100%{
animation-timing-function: ease-out;
transform: translateX(0%);
}
}
@keyframes dismantle-jump-i-y {
0%{
transform: translateY(-2.15rem);
}
75%{
transform: translateY(-180%);
}
100%{
animation-timing-function: ease-out;
transform: translateY(0%);
}
}
/* letter R */
.dismantle-tower-hire-r{
position: relative;
z-index: 3;
animation: dismantle-jump-r-x 2s forwards;
}
.dismantle-tower-hire-r::after{
content: 'R';
display: inline-block;
animation: dismantle-jump-r-y 2s forwards;
}
@keyframes dismantle-jump-r-x {
0%{
transform: translateX(128%);
}
75%{
transform: translateX(50%)
}
100%{
animation-timing-function: ease-out;
transform: translateX(0%)
}
}
@keyframes dismantle-jump-r-y {
0%{
transform: translateY(-1.08rem);
}
75%{
transform: translateY(-100%);
}
100%{
animation-timing-function: ease-out;
transform: translateY(0%);
}
}
@media (min-width: 40em){
@keyframes dismantle-jump-h-y {
0%{
transform: translateY(-6.78rem) rotate(-40deg);
}
10%{
transform: translateY(-220%);
}
30%{
transform: translateY(-6.65rem) rotate(20deg);
}
50%{
animation-timing-function: ease-out;
transform: translateY(-220%);
}
60%{
transform: translateY(0%);
}
85%{
transform: translateY(-50%);
}
100%{
animation-timing-function: ease-out;
transform: translateY(0%);
}
}
@keyframes dismantle-jump-i-y {
0%{
transform: translateY(-4.2rem);
}
75%{
transform: translateY(-180%);
}
100%{
animation-timing-function: ease-out;
transform: translateY(0%);
}
}
@keyframes dismantle-jump-r-y {
0%{
transform: translateY(-2.1rem);
}
75%{
transform: translateY(-100%);
}
100%{
animation-timing-function: ease-out;
transform: translateY(0%);
}
}
}
@media (min-width: 53em){
@keyframes dismantle-jump-h-x {
0%{
transform: translateX(318%);
}
30%{
transform: translateX(290%);
}
60%{
transform: translateX(50%);
}
100%{
animation-timing-function: ease-out;
transform: translateX(0%);
}
}
@keyframes dismantle-jump-h-y {
0%{
transform: translateY(-10.04rem) rotate(-40deg);
}
10%{
transform: translateY(-220%);
}
30%{
transform: translateY(-9.85rem) rotate(20deg);
}
50%{
animation-timing-function: ease-out;
transform: translateY(-220%);
}
60%{
transform: translateY(0%);
}
85%{
transform: translateY(-50%);
}
100%{
animation-timing-function: ease-out;
transform: translateY(0%);
}
}
@keyframes dismantle-jump-i-x {
0%{
transform: translateX(410%);
}
75%{
transform: translateX(50%);
}
100%{
animation-timing-function: ease-out;
transform: translateX(0%);
}
}
@keyframes dismantle-jump-i-y {
0%{
transform: translateY(-6.24rem);
}
75%{
transform: translateY(-180%);
}
100%{
animation-timing-function: ease-out;
transform: translateY(0%);
}
}
@keyframes dismantle-jump-r-y {
0%{
transform: translateY(-3.13rem);
}
75%{
transform: translateY(-100%);
}
100%{
animation-timing-function: ease-out;
transform: translateY(0%);
}
}
}
@media (min-width: 72em){
@keyframes dismantle-jump-h-y {
0%{
transform: translateY(-13rem) rotate(-40deg);
}
10%{
transform: translateY(-220%);
}
30%{
transform: translateY(-12.7rem) rotate(20deg);
}
50%{
animation-timing-function: ease-out;
transform: translateY(-220%);
}
60%{
transform: translateY(0%);
}
85%{
transform: translateY(-50%);
}
100%{
animation-timing-function: ease-out;
transform: translateY(0%);
}
}
@keyframes dismantle-jump-i-y {
0%{
transform: translateY(-8.05rem);
}
75%{
transform: translateY(-180%);
}
100%{
animation-timing-function: ease-out;
transform: translateY(0%);
}
}
@keyframes dismantle-jump-r-y {
0%{
transform: translateY(-4.05rem);
}
75%{
transform: translateY(-100%);
}
100%{
animation-timing-function: ease-out;
transform: translateY(0%);
}
}
}
.request-dance-all{
animation: dance 4s ease-in-out forwards;
}
/* ****** Carousel ***************************************************************************** */
.carousel{
width: 100vw;
height: 100vh;
animation: rotating 18s linear infinite;
}
@keyframes rotating{
0%{
transform: rotate(0deg)
}
100%{
transform: rotate(360deg)
}
}
.triangle-basics{
position: absolute;
width: 0px;
height: 0px;
border-top: 0vh solid transparent;
border-right: 0 solid transparent;
border-bottom: 200vh solid transparent;
left: 50%;
top: -150%;
transform-origin: left bottom;
}
.triangle1{
border-left: 80vh solid var(--color-1);
}
.triangle2{
border-left: 80vh solid var(--color-2);
transform: rotate(20deg)
}
.triangle3{
border-left: 80vh solid var(--color-3);
transform: rotate(40deg)
}
.triangle4{
border-left: 80vh solid var(--color-4);
transform: rotate(60deg)
}
.triangle5{
border-left: 80vh solid var(--color-5);
transform: rotate(80deg)
}
.triangle6{
border-left: 80vh solid var(--color-6);
transform: rotate(100deg)
}
.triangle7{
border-left: 80vh solid var(--color-7);
transform: rotate(120deg)
}
.triangle8{
border-left: 80vh solid var(--color-8);
transform: rotate(140deg)
}
.triangle9{
border-left: 80vh solid var(--color-9);
transform: rotate(160deg)
}
.triangle10{
border-left: 80vh solid var(--color-10);
transform: rotate(180deg)
}
.triangle11{
border-left: 80vh solid var(--color-11);
transform: rotate(200deg)
}
.triangle12{
border-left: 80vh solid var(--color-12);
transform: rotate(220deg)
}
.triangle13{
border-left: 80vh solid var(--color-13);
transform: rotate(240deg)
}
.triangle14{
border-left: 80vh solid var(--color-14);
transform: rotate(260deg)
}
.triangle15{
border-left: 80vh solid var(--color-15);
transform: rotate(280deg)
}
.triangle16{
border-left: 80vh solid var(--color-16);
transform: rotate(300deg)
}
.triangle17{
border-left: 80vh solid var(--color-17);
transform: rotate(320deg)
}
.triangle18{
border-left: 80vh solid var(--color-18);
transform: rotate(340deg)
}
/****** Triangle in ******/
.triangle-in{
animation: in 2s ease-in forwards;
}
@keyframes in{
to{
top: -150vh;
left: 50vw;
}
}
/****** Triangle out ******/
.triangle1-out{
animation: out1 1.5s linear forwards;
}
.triangle1-out-move{
animation: out1-move 3s infinite;
}
.triangle2-out{
animation: out2 1.5s linear forwards;
}
.triangle2-out-move{
animation: out2-move 3s infinite;
}
.triangle3-out{
animation: out3 1.5s linear forwards;
}
.triangle3-out-move{
animation: out3-move 3s infinite;
}
.triangle4-out{
animation: out4 1.5s linear forwards;
}
.triangle4-out-move{
animation: out4-move 3s infinite;
}
.triangle5-out{
animation: out5 1.5s linear forwards;
}
.triangle5-out-move{
animation: out5-move 3s infinite;
}
.triangle6-out{
animation: out6 1.5s linear forwards;
}
.triangle6-out-move{
animation: out6-move 3s infinite;
}
.triangle7-out{
animation: out7 1.5s linear forwards;
}
.triangle7-out-move{
animation: out7-move 3s linear infinite;
}
.triangle8-out{
animation: out8 1.5s linear forwards;
}
.triangle8-out-move{
animation: out8-move 3s infinite;
}
.triangle9-out{
animation: out9 1.5s linear forwards;
}
.triangle9-out-move{
animation: out9-move 3s infinite;
}
.triangle10-out{
animation: out10 1.5s linear forwards;
}
.triangle10-out-move{
animation: out10-move 3s infinite;
}
.triangle11-out{
animation: out11 1.5s linear forwards;
}
.triangle11-out-move{
animation: out11-move 3s infinite;
}
.triangle12-out{
animation: out12 1.5s linear forwards;
}
.triangle12-out-move{
animation: out12-move 3s infinite;
}
.triangle13-out{
animation: out13 1.5s linear forwards;
}
.triangle13-out-move{
animation: out13-move 3s infinite;
}
.triangle14-out{
animation: out14 1.5s linear forwards;
}
.triangle14-out-move{
animation: out14-move 3s infinite;
}
.triangle15-out{
animation: out15 1.5s linear forwards;
}
.triangle15-out-move{
animation: out15-move 3s infinite;
}
.triangle16-out{
animation: out16 1.5s linear forwards;
}
.triangle16-out-move{
animation: out16-move 3s infinite;
}
.triangle17-out{
animation: out17 1.5s linear forwards;
}
.triangle17-out-move{
animation: out17-move 3s infinite;
}
.triangle18-out{
animation: out18 1.5s linear forwards;
}
.triangle18-out-move{
animation: out18-move 3s infinite;
}
/****** keyframes out ideal******/
@keyframes out1{
to{
transform: translateY(-42vw) translateX(7vw);
/* transform: translateY(-29vw) translateX(5vw); */
}
}
@keyframes out1-move{
0%{
/* small */
transform: translateY(-42vw) translateX(7vw);
}
50%{
transform: translateY(-29vw) translateX(5vw);
}
100%{
/* small */
transform: translateY(-42vw) translateX(7vw);
}
}
@keyframes out2{
to{
transform: translateY(-36vw) translateX(23vw) rotate(20deg);
/* transform: translateY(-27vw) translatex(15vw) rotate(20deg); */
}
}
@keyframes out2-move{
0%{
/* small */
transform: translateY(-36vw) translateX(23vw) rotate(20deg);
}
50%{
transform: translateY(-27vw) translatex(15vw) rotate(20deg);
}
100%{
/* small */
transform: translateY(-36vw) translateX(23vw) rotate(20deg);
}
}
@keyframes out3{
to{
/* small */
transform: translateY(-32vw) translatex(33vw) rotate(40deg);
/* transform: translateY(-20vw) translatex(24vw) rotate(40deg); */
}
}
@keyframes out3-move{
0%{
/* small */
transform: translateY(-32vw) translatex(33vw) rotate(40deg);
}
50%{
transform: translateY(-20vw) translatex(24vw) rotate(40deg);
}
100%{
/* small */
transform: translateY(-32vw) translatex(33vw) rotate(40deg);
}
}
@keyframes out4{
to{
/* small */
transform: translateY(-15vw) translatex(42vw) rotate(60deg);
/* transform: translateY(-10vw) translatex(29svw) rotate(60deg); */
}
}
@keyframes out4-move{
0%{
/* small */
transform: translateY(-15vw) translatex(42vw) rotate(60deg);
}
50%{
transform: translateY(-10vw) translatex(29vw) rotate(60deg);
}
100%{
/* small */
transform: translateY(-15vw) translatex(42vw) rotate(60deg);
}
}
@keyframes out5{
to{
/* small */
transform: translateY(1vw) translatex(44vw) rotate(80deg);
/* transform: translateY(1vw) translatex(30vw) rotate(80deg); */
}
}
@keyframes out5-move{
0%{
/* small */
transform: translateY(1vw) translatex(44vw) rotate(80deg);
}
50%{
transform: translateY(1vw) translatex(30vw) rotate(80deg);
}
100%{
/* small */
transform: translateY(1vw) translatex(44vw) rotate(80deg);
}
}
@keyframes out6{
to{
/* small */
transform: translateY(13vw) translatex(43vw) rotate(102deg);
/* transform: translateY(12vw) translatex(28vw) rotate(102deg); */
}
}
@keyframes out6-move{
0%{
/* small */
transform: translateY(13vw) translatex(43vw) rotate(102deg);
}
50%{
transform: translateY(12vw) translatex(28vw) rotate(102deg);
}
100%{
/* small */
transform: translateY(13vw) translatex(43vw) rotate(102deg);
}
}
@keyframes out7{
to{
/* small */
transform: translateY(25vw) translatex(38vw) rotate(120deg);
/* transform: translateY(21vw) translatex(25vw) rotate(120deg); */
}
}
@keyframes out7-move{
0%{
/* small */
transform: translateY(25vw) translatex(38vw) rotate(120deg);
}
50%{
transform: translateY(21vw) translatex(25vw) rotate(120deg);
}
100%{
/* small */
transform: translateY(25vw) translatex(38vw) rotate(120deg);
}
}
@keyframes out8{
to{
/* small */
transform: translateY(35vw) translatex(27vw) rotate(140deg);
/* transform: translateY(26vw) translatex(19vw) rotate(140deg); */
}
}
@keyframes out8-move{
0%{
/* small */
transform: translateY(35vw) translatex(27vw) rotate(140deg);
}
50%{
transform: translateY(26vw) translatex(19vw) rotate(140deg);
}
100%{
/* small */
transform: translateY(35vw) translatex(27vw) rotate(140deg);
}
}
@keyframes out9{
to{
/* small */
transform: translateY(42vw) translatex(12vw) rotate(160deg);
/* transform: translateY(30vw) translatex(9vw) rotate(160deg); */
}
}
@keyframes out9-move{
0%{
/* small */
transform: translateY(42vw) translatex(12vw) rotate(160deg);
}
50%{
transform: translateY(30vw) translatex(9vw) rotate(160deg);
}
100%{
/* small */
transform: translateY(42vw) translatex(12vw) rotate(160deg);
}
}
@keyframes out10{
to{
/* small */
transform: translateY(45vw) translatex(-3vw) rotate(180deg);
/* transform: translateY(33vw) translatex(-3vw) rotate(180deg); */
}
}
@keyframes out10-move{
0%{
/* small */
transform: translateY(45vw) translatex(-3vw) rotate(180deg);
}
50%{
transform: translateY(33vw) translatex(-3vw) rotate(180deg);
}
100%{
/* small */
transform: translateY(45vw) translatex(-3vw) rotate(180deg);
}
}
@keyframes out11{
to{
/* small */
transform: translateY(40vw) translatex(-15vw) rotate(200deg);
/* transform: translateY(28vw) translatex(-13vw) rotate(200deg); */
}
}
@keyframes out11-move{
0%{
/* small */
transform: translateY(40vw) translatex(-15vw) rotate(200deg);
}
50%{
transform: translateY(28vw) translatex(-13vw) rotate(200deg);
}
100%{
/* small */
transform: translateY(40vw) translatex(-15vw) rotate(200deg);
}
}
@keyframes out12{
to{
/* small */
transform: translateY(34vw) translateX(-31vw) rotate(220deg);
/* transform: translateY(23vw) translatex(-22vw) rotate(220deg); */
}
}
@keyframes out12-move{
0%{
/* small */
transform: translateY(34vw) translateX(-31vw) rotate(220deg);
}
50%{
transform: translateY(23vw) translatex(-22vw) rotate(220deg);
}
100%{
/* small */
transform: translateY(34vw) translateX(-31vw) rotate(220deg);
}
}
@keyframes out13{
to{
/* small */
transform: translateY(20vw) translatex(-40vw) rotate(240deg);
/* transform: translateY(15vw) translatex(-27vw) rotate(240deg); */
}
}
@keyframes out13-move{
0%{
/* small */
transform: translateY(20vw) translatex(-40vw) rotate(240deg);
}
50%{
transform: translateY(15vw) translatex(-27vw) rotate(240deg);
}
100%{
/* small */
transform: translateY(20vw) translatex(-40vw) rotate(240deg);
}
}
@keyframes out14{
to{
/* small */
transform: translateY(6vw) translatex(-42vw) rotate(260deg);
/* transform: translateY(6vw) translatex(-29vw) rotate(260deg); */
}
}
@keyframes out14-move{
0%{
/* small */
transform: translateY(6vw) translatex(-42vw) rotate(260deg);
}
50%{
transform: translateY(6vw) translatex(-29vw) rotate(260deg);
}
100%{
/* small */
transform: translateY(6vw) translatex(-42vw) rotate(260deg);
}
}
@keyframes out15{
to{
/* small */
transform: translateY(-11vw) translatex(-40vw) rotate(280deg);
/* transform: translateY(-5vw) translatex(-30vw) rotate(280deg); */
}
}
@keyframes out15-move{
0%{
/* small */
transform: translateY(-11vw) translatex(-40vw) rotate(280deg);
}
50%{
transform: translateY(-5vw) translatex(-30vw) rotate(280deg);
}
100%{
/* small */
transform: translateY(-11vw) translatex(-40vw) rotate(280deg);
}
}
@keyframes out16{
to{
/* small */
transform: translateY(-25vw) translatex(-35vw) rotate(300deg);
/* transform: translateY(-18vw) translatex(-24vw) rotate(300deg); */
}
}
@keyframes out16-move{
0%{
/* small */
transform: translateY(-25vw) translatex(-35vw) rotate(300deg);
}
50%{
transform: translateY(-18vw) translatex(-24vw) rotate(300deg);
}
100%{
/* small */
transform: translateY(-25vw) translatex(-35vw) rotate(300deg);
}
}
@keyframes out17{
to{
/* small */
transform: translateY(-35vw) translatex(-24vw) rotate(320deg);
/* transform: translateY(-27vw) translatex(-17vw) rotate(320deg); */
}
}
@keyframes out17-move{
0%{
/* small */
transform: translateY(-35vw) translatex(-24vw) rotate(320deg);
}
50%{
transform: translateY(-27vw) translatex(-17vw) rotate(320deg);
}
100%{
/* small */
transform: translateY(-35vw) translatex(-24vw) rotate(320deg);
}
}
@keyframes out18{
to{
/* small */
transform: translateY(-42vw) translatex(-10vw) rotate(340deg);
/* transform: translateY(-29vw) translatex(-5vw) rotate(340deg); */
}
}
@keyframes out18-move{
0%{
/* small */
transform: translateY(-42vw) translatex(-10vw) rotate(340deg);
}
50%{
transform: translateY(-29vw) translatex(-5vw) rotate(340deg);
}
100%{
/* small */
transform: translateY(-42vw) translatex(-10vw) rotate(340deg);
}
}