This Magic Gateways Animation is developed using HTML, CSS, and PrefixFree. PrefixFree allows only for unprefixed CSS properties.
You can see the full code of this animation. And there is a video tutorial also.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Magic Gateways Animation - DevXmart</title>
<link
href="https://fonts.googleapis.com/css?family=Petit+Formal+Script&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="./style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<style>
.unit:nth-child(5n + 1) {
--i: 0;
}
.unit:nth-child(n + 1) {
--j: 0;
}
.unit:nth-child(5n + 2) {
--i: 1;
}
.unit:nth-child(n + 6) {
--j: 1;
}
.unit:nth-child(5n + 3) {
--i: 2;
}
.unit:nth-child(n + 11) {
--j: 2;
}
.unit:nth-child(5n + 4) {
--i: 3;
}
.unit:nth-child(n + 16) {
--j: 3;
}
.unit:nth-child(5n + 5) {
--i: 4;
}
.unit:nth-child(n + 21) {
--j: 4;
}
.side:nth-child(1) {
--idx: 0;
}
.side:nth-child(2) {
--idx: 1;
}
.side:nth-child(3) {
--idx: 2;
}
</style>
<div class="a3d" style="--n: 5">
<div
class="unit anim"
style="--tr: 7.15s; --to: 1.36s; --dt: -2.33s; --cx: 0.84"
>
<div class="cube shdw">
<div class="half"></div>
<div class="half"></div>
</div>
<div class="gate shdw">
<div class="inner later">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
<div class="front"></div>
<div class="outer later"></div>
</div>
</div>
<div
class="unit anim"
style="--tr: 6.66s; --to: 1.13s; --dt: -2.53s; --cx: 0.93"
>
<div class="cube shdw">
<div class="half"></div>
<div class="half"></div>
</div>
<div class="gate shdw">
<div class="inner later">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
<div class="front"></div>
<div class="outer later"></div>
</div>
</div>
<div class="unit">
<div class="gate shdw">
<div class="inner later">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
<div class="front"></div>
<div class="outer later"></div>
</div>
</div>
<div
class="unit anim"
style="--tr: 7.72s; --to: 1.32s; --dt: -0.82s; --cx: 0.29"
>
<div class="cube shdw">
<div class="half"></div>
<div class="half"></div>
</div>
<div class="gate shdw">
<div class="inner later">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
<div class="front"></div>
<div class="outer later"></div>
</div>
</div>
<div
class="unit anim"
style="--tr: 6.39s; --to: 1.4s; --dt: -0.97s; --cx: 0.83"
>
<div class="cube shdw">
<div class="half"></div>
<div class="half"></div>
</div>
<div class="gate shdw">
<div class="inner later">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
<div class="front"></div>
<div class="outer later"></div>
</div>
</div>
<div
class="unit anim"
style="--tr: 5.12s; --to: 1.46s; --dt: -2.66s; --cx: 0.99"
>
<div class="cube shdw">
<div class="half"></div>
<div class="half"></div>
</div>
<div class="gate shdw">
<div class="inner later">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
<div class="front"></div>
<div class="outer later"></div>
</div>
</div>
<div
class="unit anim"
style="--tr: 5.85s; --to: 1.44s; --dt: -1.62s; --cx: 1"
>
<div class="cube shdw">
<div class="half"></div>
<div class="half"></div>
</div>
<div class="gate shdw">
<div class="inner later">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
<div class="front"></div>
<div class="outer later"></div>
</div>
</div>
<div class="unit">
<div class="gate shdw">
<div class="inner later">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
<div class="front"></div>
<div class="outer later"></div>
</div>
</div>
<div
class="unit anim"
style="--tr: 6.68s; --to: 1.95s; --dt: -0.99s; --cx: 0.94"
>
<div class="cube shdw">
<div class="half"></div>
<div class="half"></div>
</div>
<div class="gate shdw">
<div class="inner later">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
<div class="front"></div>
<div class="outer later"></div>
</div>
</div>
<div
class="unit anim"
style="--tr: 6.79s; --to: 1.37s; --dt: -4.26s; --cx: 0.71"
>
<div class="cube shdw">
<div class="half"></div>
<div class="half"></div>
</div>
<div class="gate shdw">
<div class="inner later">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
<div class="front"></div>
<div class="outer later"></div>
</div>
</div>
<div
class="unit anim"
style="--tr: 7.62s; --to: 1.43s; --dt: -3.16s; --cx: 0.4"
>
<div class="cube shdw">
<div class="half"></div>
<div class="half"></div>
</div>
<div class="gate shdw">
<div class="inner later">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
<div class="front"></div>
<div class="outer later"></div>
</div>
</div>
<div class="unit">
<div class="gate shdw">
<div class="inner later">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
<div class="front"></div>
<div class="outer later"></div>
</div>
</div>
<div class="unit">
<div class="gate shdw">
<div class="inner later">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
<div class="front"></div>
<div class="outer later"></div>
</div>
</div>
<div
class="unit anim"
style="--tr: 7.83s; --to: 1.45s; --dt: -2.45s; --cx: 0.25"
>
<div class="cube shdw">
<div class="half"></div>
<div class="half"></div>
</div>
<div class="gate shdw">
<div class="inner later">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
<div class="front"></div>
<div class="outer later"></div>
</div>
</div>
<div
class="unit anim"
style="--tr: 7.28s; --to: 1.21s; --dt: -3.44s; --cx: 0.4"
>
<div class="cube shdw">
<div class="half"></div>
<div class="half"></div>
</div>
<div class="gate shdw">
<div class="inner later">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
<div class="front"></div>
<div class="outer later"></div>
</div>
</div>
<div class="unit">
<div class="gate shdw">
<div class="inner later">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
<div class="front"></div>
<div class="outer later"></div>
</div>
</div>
<div class="unit">
<div class="gate shdw">
<div class="inner later">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
<div class="front"></div>
<div class="outer later"></div>
</div>
</div>
<div class="unit">
<div class="gate shdw">
<div class="inner later">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
<div class="front"></div>
<div class="outer later"></div>
</div>
</div>
<div class="unit">
<div class="gate shdw">
<div class="inner later">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
<div class="front"></div>
<div class="outer later"></div>
</div>
</div>
<div class="unit">
<div class="gate shdw">
<div class="inner later">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
<div class="front"></div>
<div class="outer later"></div>
</div>
</div>
<div class="unit">
<div class="gate shdw">
<div class="inner later">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
<div class="front"></div>
<div class="outer later"></div>
</div>
</div>
<div
class="unit anim"
style="--tr: 7.2s; --to: 1.84s; --dt: -6.49s; --cx: 0.99"
>
<div class="cube shdw">
<div class="half"></div>
<div class="half"></div>
</div>
<div class="gate shdw">
<div class="inner later">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
<div class="front"></div>
<div class="outer later"></div>
</div>
</div>
<div
class="unit anim"
style="--tr: 7.4s; --to: 1.75s; --dt: -1.15s; --cx: 0.8"
>
<div class="cube shdw">
<div class="half"></div>
<div class="half"></div>
</div>
<div class="gate shdw">
<div class="inner later">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
<div class="front"></div>
<div class="outer later"></div>
</div>
</div>
<div class="unit">
<div class="gate shdw">
<div class="inner later">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
<div class="front"></div>
<div class="outer later"></div>
</div>
</div>
<div class="unit">
<div class="gate shdw">
<div class="inner later">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
<div class="front"></div>
<div class="outer later"></div>
</div>
</div>
</div>
</body>
</html>
CSS Code
.front::before, .front::after, .half::before, .half::after, .cube::after {
transform: rotate3d(var(--vi), var(--vj), 0, calc(var(--s)*.5turn)) translatez(var(--z, 1em));
}
.front::before, .front::after, .later .side, .later::before, .later::after, .later, .half::before, .half::after, .cube::after {
--int: Max(0, calc(var(--sum) - .5));
--mod: calc(var(--sum) - var(--int));
--abs: Max(calc(.5 - var(--mod)), calc(var(--mod) - .5));
--k: calc(1 - 2*var(--abs));
color: hsl(200, var(--sat, 75%), calc(63% - var(--k, -.1)*50%));
background: currentcolor;
}
@property --d {
syntax: "";
initial-value: 0px;
inherits: true;
}
@property --p {
syntax: "";
initial-value: 0;
inherits: true;
}
@property --int {
syntax: "";
initial-value: 0;
inherits: true;
}
@property --f {
syntax: "";
initial-value: 0;
inherits: true;
}
body, div {
display: grid;
}
body {
overflow: hidden;
margin: 0;
height: 100vh;
background: #319eea;
}
body:before, body:after {
--o: calc(var(--s)*-100%);
position: absolute;
z-index: -1;
top: calc(var(--s)*100%);
left: calc(var(--s)*100%);
padding: 0 0.5em;
transform: translate(var(--o), var(--o));
opacity: 0.05;
color: #fff;
font: italic 900 4vmin/2 petit formal script;
white-space: nowrap;
text-align: center;
}
body:after {
content: "DevXmart";
}
body:before {
content: "DevXmart";
}
div {
--vi: 0;
--vj: calc(1 - var(--vi));
transform-style: preserve-3d;
}
div, ::before, ::after {
grid-area: 1/1;
}
.side, ::before, ::after {
--not-s: calc(1 - var(--s));
--sgn-s: calc(2*var(--s) - 1);
backface-visibility: hidden;
}
.side:nth-child(1), ::before {
--s: 0 ;
}
.side:nth-child(3), ::after {
--s: 1 ;
}
.a3d {
grid-gap: 9em;
grid-template: 6em/repeat(var(--n), 6em);
place-self: center;
transform: rotatex(-35deg) rotatey(45deg);
}
.unit {
--f: .5;
--m: calc(.5*(var(--n) - 1));
grid-area: 1/calc(var(--i) + 1);
transform: translatez(calc((var(--j) - var(--m))*15em)) rotatey(calc(var(--p, 0)*1turn));
}
.anim {
animation: p var(--tr) cubic-bezier(var(--cx), calc(-1*var(--cx)), calc(1 - var(--cx)), calc(1 + var(--cx))) var(--dt) infinite alternate, osc var(--to) ease-in-out infinite alternate;
}
@keyframes p {
0%, 25% {
--p: 0 ;
}
75%, 100% {
--p: .5 ;
}
}
@keyframes osc {
0%, 35% {
--d: -3em ;
}
65%, 100% {
--d: 3em ;
}
}
.shdw::before {
transform: translatey(3.75em) rotatex(90deg);
background: radial-gradient(rgba(0, 0, 0, 0.5), transparent);
filter: blur(9px);
content: "";
}
.cube {
--vi: 1;
--sat: 62%;
place-self: center;
width: 2em;
height: 2em;
transform: translatez(var(--d));
}
.cube::after {
--s: .5;
content: "";
}
.half {
--dir: 0;
transform: rotatey(calc(var(--dir)*90deg));
}
.half:nth-child(2) {
--dir: 1 ;
}
.half::before, .half::after {
--sum: calc(var(--p) + .5*var(--s) + .25*var(--dir) + 1);
content: "";
}
.gate {
animation: f calc(.5*var(--to)) ease-in-out infinite alternate;
}
.gate::before {
align-self: center;
height: 1.5em;
}
@keyframes f {
0%, 35% {
--f: .35 ;
}
100% {
--f: .75 ;
}
}
.later {
--lat-w: 6em;
--sgn-e: calc(2*var(--e) - 1);
grid-auto-flow: column;
justify-content: center;
place-self: center;
width: var(--lat-w);
height: 1.5em;
transform: translatey(calc(-.5*var(--sgn-e)*var(--lat-w))) rotatex(90deg);
}
.later .side, .later::before, .later::after {
--sum: calc(var(--p) + .25 + .5*(var(--e) - var(--sgn-e)*var(--s)) + 1);
grid-area: initial;
width: inherit;
transform-origin: calc(var(--not-s)*100%);
transform: rotatey(calc(var(--sgn-s)*var(--sgn-e)*90deg));
}
.outer {
--e: 1;
grid-gap: 6em;
}
.outer::before, .outer::after {
content: "";
}
.front::before, .front::after {
--z: 0.75em;
--sum: calc(var(--p) + var(--s)*.5 + 1);
border: solid calc(.5*(1 - var(--f))*6em) currentcolor;
background: transparent;
content: "";
}
.inner {
--e: 0;
--lat-w: calc(var(--f)*6em) ;
}
.side {
--sum: calc(var(--p) + .25 + .5*var(--s) + 1);
}
.anim .side:nth-child(2) {
overflow: hidden;
}
.anim .side:nth-child(2)::after {
place-self: center;
width: 2em;
height: 2em;
transform: translatey(var(--d));
background: radial-gradient(#000, transparent);
filter: blur(9px);
content: "";
}
.anim .side::before {
margin: 3px 0;
background: linear-gradient(45deg, hotpink 15%, gainsboro, gold 85%);
animation: glow calc(.5*var(--to)) ease-out infinite alternate;
content: "";
}
@keyframes glow {
0%, 35% {
opacity: 0;
}
70%, 100% {
--f: .75 ;
}
}
