.flags{background-image:linear-gradient(#fff,#fff);color:#fff;min-height:100vh;display:flex;justify-content:center;align-items:center;font-size:20px;perspective:20em} .flag{position:relative;width:0;height:16em;background-color:#fff;transform:translateX(-6em) rotateX(-30deg) rotateY(15deg);transform-style:preserve-3d} .flap{position:absolute;top:0;left:calc(100% - 1px);width:calc(1em + 1px);height:9em;box-shadow:0 0 1em #0003 inset;transform-style:preserve-3d;transform-origin:left;-webkit-animation:flap 3s infinite ease-in-out;animation:flap 3s infinite ease-in-out} .flap{-webkit-animation-delay:0s;-moz-animation-delay:0s;animation-delay:0s;background-image:linear-gradient(180deg,red,white);--v:0deg} .flap .content::before{left:0} .flap .content::after{left:0} .flap > .flap{-webkit-animation-delay:-0.375s;animation-delay:-0.375s;background-image:linear-gradient(180deg,red,white);--v:2.5deg} .flap > .flap .content::before{left:-0.25em} .flap > .flap .content::after{left:-0.5em} .flap > .flap > .flap{-webkit-animation-delay:-0.75s;animation-delay:-0.75s;background-image:linear-gradient(180deg,red,white);--v:5deg} .flap > .flap > .flap .content::before{left:-0.5em} .flap > .flap > .flap .content::after{left:-1em} .flap > .flap > .flap > .flap{-webkit-animation-delay:-1.125s;animation-delay:-1.125s;background-image:linear-gradient(180deg,red,white);--v:7.5deg} .flap > .flap > .flap > .flap .content::before{left:-0.75em} .flap > .flap > .flap > .flap .content::after{left:-1.5em} .flap > .flap > .flap > .flap > .flap{-webkit-animation-delay:-1.5s;animation-delay:-1.5s;background-image:linear-gradient(180deg,red,white);--v:10deg} .flap > .flap > .flap > .flap > .flap .content::before{left:-1em} .flap > .flap > .flap > .flap > .flap .content::after{left:-2em} .flap > .flap > .flap > .flap > .flap > .flap{-webkit-animation-delay:-1.875s;animation-delay:-1.875s;background-image:linear-gradient(180deg,red,white);--v:12.5deg} .flap > .flap > .flap > .flap > .flap > .flap .content::before{left:-1.25em} .flap > .flap > .flap > .flap > .flap > .flap .content::after{left:-2.5em} .flap > .flap > .flap > .flap > .flap > .flap > .flap{-webkit-animation-delay:-2.25s;animation-delay:-2.25s;background-image:linear-gradient(180deg,red,white);--v:15deg} .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::before{left:-1.5em} .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::after{left:-3em} .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap{-webkit-animation-delay:-2.625s;animation-delay:-2.625s;background-image:linear-gradient(180deg,red,white);--v:17.5deg} .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::before{left:-1.75em} .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::after{left:-3.5em} .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap{-webkit-animation-delay:-3s;animation-delay:-3s;background-image:linear-gradient(180deg,red,white);--v:20deg} .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::before{left:-2em} .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::after{left:-4em} .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap{-webkit-animation-delay:-3.375s;animation-delay:-3.375s;background-image:linear-gradient(180deg,red,white);--v:22.5deg} .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::before{left:-2.25em} .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::after{left:-4.5em} .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap{-webkit-animation-delay:-3.75s;animation-delay:-3.75s;background-image:linear-gradient(180deg,red,white);--v:25deg} .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::before{left:-2.5em} .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::after{left:-5em} .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap{-webkit-animation-delay:-4.125s;animation-delay:-4.125s;background-image:linear-gradient(180deg,red,white);--v:27.5deg} .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::before{left:-2.75em} .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::after{left:-5.5em} .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap{-webkit-animation-delay:-4.5s;animation-delay:-4.5s;background-image:linear-gradient(180deg,red,white);--v:30deg} .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::before{left:-3em} .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::after{left:-6em} .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap{-webkit-animation-delay:-4.875s;animation-delay:-4.875s;background-image:linear-gradient(180deg,red,white);--v:32.5deg} .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::before{left:-3.25em} .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::after{left:-6.5em} .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap{-webkit-animation-delay:-5.25s;animation-delay:-5.25s;background-image:linear-gradient(180deg,red,white);--v:35deg} .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::before{left:-3.5em} .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::after{left:-7em} .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap{-webkit-animation-delay:-5.625s;animation-delay:-5.625s;background-image:linear-gradient(180deg,red,white);--v:37.5deg} .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::before{left:-3.75em} .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::after{left:-7.5em} .flap::after{content:"";position:absolute;top:16em;left:50%;width:200%;height:1em;background-color:#999;transform:translate(-50%,-50%) rotateX(90deg);border-radius:0.5em;filter:blur(0.6em)} .content{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;transform:translateZ(0.5px);text-shadow:0 0 0.5em #000} .content::before{content:"81 Tahun";position:absolute;bottom:40%;left:0;width:4em;text-align:center;font-size:4em} .content::after{content:"MERDEKA";position:absolute;top:50%;left:0;width:8em;text-align:center;font-size:2em;white-space:pre;line-height:0.8;-webkit-animation:afterText 6.6s infinite step-end;animation:afterText 6.6s infinite step-end} @-webkit-keyframes afterText{0%{content:"MERDEKA"}50%{content:"DIRGAHAYU \aINDONESIA"}} @keyframes afterText{0%{content:"MERDEKA"}50%{content:"DIRGAHAYU \aINDONESIA"}} @-webkit-keyframes flap{0%,100%{transform:rotateY(calc(var(--v) * -1))}50%{transform:rotateY(var(--v))}} @keyframes flap{0%,100%{transform:rotateY(calc(var(--v) * -1))}50%{transform:rotateY(var(--v))}} .pole{content:"";position:absolute;top:0;right:0;width:1em;height:100%;border-radius:0 0 0.5em 0.5em/0 0 0.3em 0.3em;background-image:linear-gradient(#7777,#6660,#555),linear-gradient(90deg,#777,#fff,#555)} .pole::before{content:"";position:absolute;top:100%;left:50%;width:4em;height:4em;transform:translate(-50%,-50%) rotateX(90deg);background-image:radial-gradient(#0004,#0000 60%)} .pole::after{content:"";position:absolute;top:0%;left:50%;width:1em;height:0.4em;border-radius:50%;transform:translate(-50%,-50%);background-image:radial-gradient(circle at top,#aaa,#333)}