cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              %head
  %link(href="http://fonts.googleapis.com/css?family=Oswald:300,400" rel="stylesheet" type="text/css")
  %link(href="http://fonts.googleapis.com/css?family=Mrs+Saint+Delafield" rel="stylesheet" type="text/css")
%body
  .scene-button
    .btn
      .btn-info
        %h1.btn-h1 
          :plain
            <span>B<!--
              --><span>L<!--
                --><span>A<!--
                  --><span>C<!--
                      --><span>K<!--
                        --><span class="btn-h1_thin">O<!--
                          --><span class="btn-h1_thin">U<!--
                            --><span class="btn-h1_thin">T</span>
                          </span>
                        </span>
                      </span>
                    </span>
                  </span>
              </span>
            </span>
        .btn-line
        %p.btn-author by Ee Venn Soh
        %p.btn-copy "Blackout" is a cinematic experience done purely in CSS that explores the phenomenon caused by extinction of lights.
        %a#btn_click.btn-button BEGIN

  .scene-spinner
    .spn-wrap
      .spn-spinner
        -(1..100).each do
          %i.spn-a
            %b.spn-b		


  .scene-torus
    .tor-wrap
      .tor-field
        -(1..30).each do
          .tor-circle
            .tor-rotor
              -(1..20).each do
                .tor-dot

  .scene-hole
    .hol-hole
      - (1..8).each do
        %i.hol-a

  .scene-polygon
    .pol-wrap
      .pol-dodecahedron
        -(1..12).each do
          .pol-pentagon
            .pol-pentagon-inner
  %script(src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js")
  :javascript
    $(document).ready(function(){
      $("#btn_click").on("click", function(){
        $(".btn-h1 span").addClass("btn_ghost").delay(1000).queue(function(){
          $(".btn-line").addClass("btn_gone");
          $(".btn-author").addClass("btn_gone");
          $(".btn-copy").addClass("btn_gone");
          $(".btn-button").addClass("btn_gone").delay(500).queue(function(){
            $(".btn-info").addClass("btn_white");
            $(".btn").addClass("btn_shrink").delay(1000).queue(function(){
              $(".scene-button").css("display", "none");
              $(".scene-spinner").css("display", "flex").delay(4500).queue(function(){
                $(".scene-spinner").css("display", "none");
                $(".scene-torus").css("display", "flex").delay(9000).queue(function(){
                  $(".scene-torus").css("display", "none");
                  $(".scene-hole").css("display", "flex").delay(6500).queue(function(){
                    $(".scene-hole").css("display", "none");
                    $(".scene-polygon").css("display", "flex");
                  })
                })
              })
            });
          });
        });
      });
    });

            
          
!
            
              @import "compass/css3";

// -------------------------------------------------------------------------------------------------------------------------
// General
body{
  display: flex;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: black;
  overflow: hidden;
}

a{
  text-decoration: none;
  color: white;
}

h1, p{
  margin: 0;
}

@function strip-units($number) {
  @return $number / ($number * 0 + 1);
}

// -------------------------------------------------------------------------------------------------------------------------
// Button (namespace "btn")

$btn_size: 25rem;
$btn_sizeUnitless: strip-units($btn_size);
$btn_steps: 40;
$btn_char: 8;
$btn_stringSpan: " > span";
$btn_stringSelector: ".btn-h1 span";

@keyframes btn_noise{
  @for $i from 0 through $btn_steps{
    #{percentage($i*(1/$btn_steps))}{
      clip:rect(random($btn_sizeUnitless)+rem, $btn_size*2, random($btn_sizeUnitless)+rem, -$btn_size);
      box-shadow: 0 0 30px hsla(0,0,100%, $i / $btn_steps);
    }
  }
}

@keyframes btn_noise2{
  @for $i from 0 through $btn_steps{
    #{percentage($i*(1/$btn_steps))}{
      clip:rect(random($btn_sizeUnitless)+rem, $btn_size*2, random($btn_sizeUnitless)+rem, -$btn_size);
    }
  }
}

@keyframes btn_ring{ 
  0%{ box-shadow: inset 0 0 0 0 hsla(0,0,100%,0), 0 0 30px white; }
  100%{ box-shadow: inset 0 0 0 20px hsla(0,0,100%,1), 0 0 30px white; }
}

.btn{
  border-radius: 50%;
  transition: transform 0.5s cubic-bezier(1, 0, 0.5, -1) 0.25s, box-shadow 0.5s cubic-bezier(1, -5, 0.5, 5) 0.25s;
  transform: scale(0.5);
  animation: btn_noise 3s ease-in-out 1, btn_ring 1s ease-in-out 3s 1;
  box-shadow: inset 0 0 0 20px hsla(0,0,100%,1), 0 0 30px white;
  left: 50%;
  top: 50%;
  margin: -$btn_size/2;
  width: $btn_size;
  height: $btn_size;
  position: absolute;
  cursor:pointer;

  &::before, &::after{
    opacity: 0;
    content:"";
    position: absolute;
    width: $btn_size + 6rem;
    height: $btn_size + 4rem;
    margin: -2rem -3rem -2rem -3rem;
    border-radius: 50%;
    z-index: -10;
  }
  
  &::before{
  box-shadow: 0 -15px 30px -15px hsla(0,0%,100%, 0.8), -25px 15px 50px -25px hsla(0,0%,100%, 0.2), 0 -25px 15px -20px hsla(0,0%,100%, .3);
  }

  &::after{
  box-shadow: 0 -25px 20px -15px hsla(0,0%,100%, 0.2), 10px 25px 15px -30px hsla(0,0%,100%, 1), -10px 30px 20px -30px hsla(0,0%,100%, .3);
  }
}

.btn-info{
  border-radius: 50%;
  transform: scale(0);
  transition: all 0.3s ease-in-out;
  background-image: repeating-radial-gradient(hsla(0,0,100%,.2) 0, black 2px, black 50px);
  overflow: hidden;
  opacity: 0;
  background-size: $btn_size/2 $btn_size/2;
  position: absolute;
  width: inherit;
  height: inherit;
}

%btn-h1{
  font:{
    family: "Oswald", sans-serif;
    weight: 400;
    style: italic;
  }
  text:{
    align: center;
    transform: uppercase;
  }
  letter-spacing: 2px;
}

.btn-h1{
  text-shadow: 0 0 0 white, 0 0 1px white, 0 1px 2px hsla(0, 0%, 100%, .5);
  @extend %btn-h1;
  position: absolute;
  clip:rect(0,20rem,20rem,0); 
  font-size: 2em;
  padding-top: 3.5rem;
  left: 23%;
  color: transparent;
}

.btn-h1 span{
  font-size: 1.1em;
}

.btn-h1_thin{
  font:{
    size: 2em;
    family: "Oswald", sans-serif;
    weight: 300;
    style: italic;
  }
}

.btn-line{
  transition: all 1s ease-in-out;
  margin: 10.5rem 3rem 2.5rem;
  border-top: 1px solid white;
  width: 0;
}

%btn-p{
  font:{
    size: 1rem;
    family: "Oswald", sans-serif;
    weight: 300;
  }

  color: white;
  text-align: center;
}

.btn-author{
  transition: all 1s ease-in-out;
  text-shadow: 0 0 1px white;
  font:{
    size: 1.8rem;
    family: 'Mrs Saint Delafield', cursive;
  } 
  opacity: 0;
  color: white;
  text-align: center;
}

.btn-copy{
  @extend %btn-p;
  padding: 0 5rem;
  margin-bottom: 1.5rem;
}

.btn-button{
  @extend %btn-h1;
  transition: all 0.1s ease-in-out;
  font:{
    style: normal;
    size: 0.8rem;
  }
  color: white;
  border: 1px solid white;
  width: 5rem;
  padding: 0.5rem;
  margin: 0 auto;
  display: block;
  position: relative;

  &::before{
    transition: all 0.1s ease-in-out;
    content: "";
    opacity: 0;
    position: absolute;
    width: 5rem;
    padding: 0.5rem;
    top: 0%;
    left: 0%;
    height: 56%;
  }

  &::after{
    text-shadow: 0 0 1px white, 0 1px 2px hsla(0, 0%, 100%, .5);
    transition: all 0.1s ease-in-out;
    @extend %btn-h1;
    font-size: 1.5rem;
    content: "GO!";
    color: black;
    position: absolute;
    opacity: 0;
    top: 0%;
    left: 35%;
  }
}

.btn-button:hover{
  width: 7rem;

  &::before{
    opacity: 1;
    animation: btn_stripe 0.5s infinite linear;
    background: linear-gradient(45deg, white 25%, black 25%, black 50%, white 50%, white 75%, black 75%, black);
    background-size: 30px 30px;
    width: 7rem;
  }

  &::after{
    opacity: 1;
  }
}

.btn-button:active{
  background-color: white;

  &::before{
    opacity: 0;
  }

  &::after{
    text-shadow: 0 0 1px white, 0 1px 2px hsla(0, 0%, 100%, .5);
    transition: all 0.1s ease-in-out;
    @extend %btn-h1;
    font-size: 1.5rem;
    content: "SWEET";
    color: black;
    position: absolute;
    top: 0%;
    left: 20%;
  }
}

@keyframes btn_stripe{
  0%{ background-position:0 0; }
  100%{ background-position:100% 0; }
}

.btn:hover{  
  box-shadow: inset 0 0 0 0 hsla(0,0,100%,0), 0 0 30px white;
  transform: scale(1);
  transition-delay: 1.5s;

  &::before{
    animation: btn_spin 0.5s cubic-bezier(.6,.2,0,.8) infinite alternate, btn_fade 1.5s cubic-bezier(.4,.2,.1,.7);
  }

  &::after{
    animation: btn_spin 1s cubic-bezier(.4,.2,.1,.7) 0.25s infinite alternate, btn_fade 1.5s cubic-bezier(.4,.2,.1,.7);
  }

  .btn-info{
    transform: scale(1);
    transition-delay: 1.75s;
    animation: btn-bg_size 4s cubic-bezier(.2,0,1,.5) infinite alternate, btn-bg_positon 3s ease-in-out infinite alternate;
    opacity: 1;
  }

  .btn-h1{
    animation: btn_noise2 4s 1 linear alternate-reverse;
    left: 23%;
  }

  .btn-author{
    transition-delay: 2.25s;
    opacity: 1;
  }

  .btn-line{
    transition-delay: 1.75s;
    width: 19rem;
    margin: 10.5rem 3rem 1rem;
  }
} 

@keyframes btn_spin{
  100% { transform: rotate(360deg) scale(1.5); }
}

@keyframes btn_fade{
  0%{ opacity: 1; }
  40%{ opacity: .2; }
  80%{ opacity: 1; }
  100%{ opacity: 0; }
}

@keyframes btn-bg_size{ 
  100% { background-size: $btn_size/10 $btn_size/10;}
}

@keyframes btn-bg_positon{ 
  0% { background-position: left top; }
  25% { background-position: right top; }
  50% { background-position: right bottom; }
  75% { background-position: left bottom; }
}

// -------------------------------------------------------------------------------------------------------------------------
// jQuery trigger 
.btn_ghost{
  animation: btn_ghost 0.3s ease-in-out 2 alternate;
  transition: all 0.3s ease-in-out;
  transition-delay: 0.8s;
  opacity: 0;
}

@for $i from 1 through $btn_char{
  #{$btn_stringSelector}{
    animation-delay: $i*(0.4s/$btn_char);
  }
  $btn_stringSelector: $btn_stringSelector + $btn_stringSpan !global;
}

@keyframes btn_ghost{
  100% {
    text-shadow: 5rem 0 20rem black;
  }

}

.btn_gone{
  transition: all 0.2s ease-in-out;
  transition-delay: 0s !important;
  transform: translateY(1rem) rotateX(90deg);
  opacity: 0 !important;
}

.btn_white{
  transition-delay: 0s !important;
  background: white !important;
}

.btn_shrink{
  transition: all 0.4s ease-in-out;
  transition-delay: 0.4s !important;
  background: white !important;
  transform: scale(0) !important; 
  opacity: 0 !important;
}

// -------------------------------------------------------------------------------------------------------------------------
// Spinner (namespace "spn")

$spn-particles: 100; // match the nodes in dom
$spn-particles_Size: .25rem;
$spn-radius: 5em;

.scene-spinner{
	margin: auto;
	height: 100%;
	display: none;
}

.spn-wrap{
	position: absolute;
	left: 50%;
	top: 50%;
} 

.spn-spinner{
	position: relative;
}

.spn-a{
	display: block;
	position: absolute;
	opacity: 0;

	.spn-b{
		display: block;
		width: $spn-particles_Size;
		height: $spn-particles_Size;
		background: white;
		border-radius: 50%;
		box-shadow: 0 0 1rem white;
		animation: spn_spin 1s infinite ease-in-out;
	}
}

@for $i from 1 through $spn-particles {
	@keyframes spn_out#{$i}{
		30%, 100%{ 
			transform: rotateZ(#{$i*360/$spn-particles}deg) translateX($spn-radius); 
			opacity: 1;
		}
	}

	.spn-a:nth-child(#{$i}) {
		animation: spn_out#{$i} 2s 2 alternate ease-in-out;

		.spn-b{
			animation-delay: $i*(1s/($spn-particles));
		}
	}
}

@keyframes spn_spin{
	15%{ transform: scale(3); }
	50%{ transform: scale(1); }
}

// -------------------------------------------------------------------------------------------------------------------------
// Torus (namespace "tor")

$tor-rings: 30; // number of rings
$tor-dots: 20; // number of dots
$tor-dots_radius: 3rem; // radius for the dots
$tor-dots_size: 0.25rem; // size of the dots
$tor-radius: 8rem; // radius for the rings
$tor_color: rgba(white, 0.2) rgba(white, 0.5) rgba(white, 1);
$tor_length: length($tor_color);

.scene-torus{
	margin: auto;
	height: 100%;
	display: none;
}

.tor-wrap{
	position: absolute;
	left: 50%;
	top: 50%;

}

.tor-field{
	position: relative;
	transform: rotateX(-30deg) rotateY(0deg);
	animation: tor_rotateY 10s ease-in-out 1;
	// opacity: 0;
	opacity: 1;
}

.tor-field *{
	position: absolute;
}

.tor-field, .tor-field *{
	transform-style: preserve-3d;
}

.tor-circle{
	@for $i from 1 through $tor-rings{
		&:nth-child(#{$i}){
			transform: rotateY(#{$i*360/$tor-rings}deg) translateZ($tor-radius);
			
			.tor-rotor{
				animation: tor_rotateX 3s linear infinite;
				animation-delay: $i*((6s/$tor-rings));
			}
		}
	}
}

.tor-dot{
	width: $tor-dots_size;
	height: $tor-dots_size;
	border-radius: 50%;
	backface-visibility: hidden;

	@for $i from 1 through $tor-dots{
		&:nth-child(#{$i}){
			transform: rotateX(#{$i*360/$tor-dots}deg) translateZ($tor-dots_radius);
			background-color: nth($tor_color, $i%$tor_length + 1);
		}
	}
}

@keyframes tor_rotateX{
	100%{ transform: rotateX(360deg); }
}

@keyframes tor_rotateY{
	20%, 30%{
   		transform: rotateX(90deg) rotateY(360deg);
   		// opacity: 1;
	}

	40%, 50%{
		transform: rotateX(-30deg) rotateZ(30deg) scale(0.6);
		// opacity: 0.2;
	}

	60%, 80%{
		transform: rotateX(60deg) rotateZ(40deg);
		// opacity: 1;
	}

	90%, 100%{
		transform: rotateX(-90deg) rotateY((360*4)+deg) scale(2);
		// opacity: 0;
	}
}

// -------------------------------------------------------------------------------------------------------------------------
// Hole (namespace "hol")

$hol-ring: 8;
$hol-ring_size: 20rem;

.scene-hole{
	margin: auto;
	height: 100%;
	display: none;
}

.hol-hole{
	top: 50%;
	left: 50%;
	position: absolute;
}

.hol-a{
	display: block;
	position: absolute;
	width: $hol-ring_size;
	height: $hol-ring_size;
	margin: -$hol-ring_size/2;
	border-radius: 50%;
	opacity: 0;
	animation: hol_scale 2s 2 linear;
}

@for $i from 1 through $hol-ring{
	i:nth-child(#{$i}){
		animation-delay: $i*(2s/$hol-ring);
	}
}

@keyframes hol_scale{
	0%{
		transform: scale(2);
		opacity: 0;
		box-shadow: 0 0 50px rgba(white, 0.5);
	}

	50%{
		transform: scale(1) translate(0, -1rem);
		opacity: 1;
		box-shadow: 0 -10px 20px rgba(white, 0.5);
	}

	100%{
		transform: scale(0.1) translate(0, 1rem);
		opacity: 0;
		box-shadow: 0 50px 20px rgba(white, 0.5);
	}
}

// -------------------------------------------------------------------------------------------------------------------------
// Polygon (namespace "pol")

$pol_length: 20em; // side length of the rhombus
$pol_n: 5; // number of sides of a pentagon
$pol_ca: 2*pi()/$pol_n; // central angle of a pentagon (=72)

$pol_ipa: ($pol_n - 2)*pi()/$pol_n; // internal angle of a pentagon (=108)
$pol_rha1: pi() - $pol_ipa; // the acute angle of the first rhombus (=72)
$pol_sa1: pi() / 2 - $pol_rha1; // skew angle to get first rhombus (=18)
$pol_hd: $pol_length*cos($pol_ipa/2); // half diagonal of first rhombus

$pol_epa: $pol_rha1; // external of a pentagon (=72)
$pol_rha2: pi() - 2*$pol_epa; // acute of the second rhombus (=36)
$pol_sa2: pi() / 2 - $pol_rha2; // skew angle to get second rhombus (=54)

$pol_ba: $pol_rha2 / 2; // bisector angle (=18)
$pol_a: $pol_length*(2*sin($pol_ba)) / (1 + 2*sin($pol_ba)); // side length of a pentagon (=em)
$pol_dy: ($pol_length - $pol_a)*sin($pol_rha2); // distance needed to move second rhombus up (=em)

$pol_ri: $pol_a / (2*tan(pi() / $pol_n)); // incircle's radius of a pentagon
$pol_rc: $pol_a / (2*sin(pi() / $pol_n)); // circumcircle's radius of a pentagon

// 3D
$pol_da: acos(-1/sqrt(5)); // dihedral angle (=116.5474)
$pol_hddh: ($pol_hd + $pol_dy)*sin(pi() - $pol_da); // distance between two opposite pentagon bases

.scene-polygon{
  margin: auto;
  height: 100%;
  display: none;
}

.pol-wrap{ // 3D space
  height: inherit;
  perspective: 35rem;
  perspective-origin: 50% 50%;
  position: absolute;
  left: 50%;
  animation: up 4s 1 ease-in-out; 
}

.pol-dodecahedron { // 3D object
  position: relative;
  transform-style: preserve-3d;
  animation: spin 50s infinite alternate cubic-bezier(0,-5,1,10); 
}
.pol-dodecahedron, .pol-pentagon, .pol-pentagon-inner, .pol-pentagon-inner::before{
  top: 50%;
  left: 50%;
  margin: -$pol_length/2;
  width: $pol_length;
  height: $pol_length;
}

.pol-pentagon, .pol-pentagon-inner, .pol-pentagon-inner::before{
  position: absolute;
  overflow: hidden;
}

.pol-pentagon { // Construction
  // top cup
  @for $i from 1 through 6 { 
    &:nth-child(#{$i}) {
      @if $i == 6{ // making top face
        transform:
          scaleY(-1) translateY($pol_hddh/2) rotateX(#{pi()/2}rad) scaleY(-1) translateY($pol_ri) // move into position

          // Making pentagon
          rotate(#{-$pol_rha1/2}rad)
          skewX(#{$pol_sa1}rad)
          scaleY(cos($pol_sa1)); 
      }

      @else{
        transform: 
          scaleY(-1) // transpose to top (mirror)
          translateY($pol_hddh/2) // move up
          rotateY(#{$i*$pol_ca + ($pol_ca/2)}rad) // lateral faces, $i*central angle + central angle/2
          translateZ($pol_ri) // move it out
          rotateX(#{(pi()/2 - $pol_da)}rad) // making the lateral faces slanted with dihedral angle (90 - $pol_da)

          // Making pentagon
          rotate(#{-$pol_rha1/2}rad)
          skewX(#{$pol_sa1}rad)
          scaleY(cos($pol_sa1));
      }

      .pol-pentagon-inner::before {
        animation: #{color}#{$i} 3s infinite alternate linear;
      }
    }
  }

  // bottom cup
  @for $i from 7 through 12 { 
    &:nth-child(#{$i}) {
      @if $i == 12{ // making bottom face
       transform:
        translateY($pol_hddh/2) rotateX(#{pi()/2}rad) translateY($pol_ri) // move into position

        // Making pentagon
        rotate(#{-$pol_rha1/2}rad)
        skewX(#{$pol_sa1}rad)
        scaleY(cos($pol_sa1)); 
     }

     @else{
      transform:
        translateY($pol_hddh/2) // move down
        rotateY(#{$i*$pol_ca + $pol_ca}rad) // lateral faces, $i*central angle + central angle/2. +36deg extra for every face so that bottom cup fit nicely to top
        translateZ($pol_ri) // move it out
        rotateX(#{(pi()/2 - $pol_da)}rad) // making the lateral faces slanted with dihedral angle (90 - $pol_da)

        // Making pentagon
        rotate(#{-$pol_rha1/2}rad)
        skewX(#{$pol_sa1}rad)
        scaleY(cos($pol_sa1));
    }
    .pol-pentagon-inner::before {
      animation: #{color}#{$i} 3s infinite alternate linear;
    }
  }
}
}

.pol-pentagon-inner {
  transform: scaleY(1/cos($pol_sa1)) skewX(#{-$pol_sa1}rad) rotate(#{$pol_rha1/2}rad) translateY(-$pol_dy) rotate(#{$pol_rha2/2}rad) skewY(#{$pol_sa2}rad) scaleX(cos($pol_sa2));

  &:before {
    content: "";
    transform: scaleX(1/cos($pol_sa2)) skewY(#{-$pol_sa2}rad) rotate(#{-$pol_rha2/2}rad) translateY($pol_dy - $pol_length/2);
  }
}

@for $i from 1 through 6 { 
  @keyframes #{color}#{$i} {
    0% { background: invert(hsla(0, 0, random(100%), .5)); }
    20% { background: hsla(0, 0, random(100%), .5); }
    40% { background: transparentize(hsla(0, 0, random(100%), .5), .1); }
    60% { background: transparentize(hsla(0, 0, random(100%), .5), .9); }
    80% {background: hsla(0, 0, 80%, 1);}
    100% {background: invert(hsla(0, 0, 80%, .8));}
  }
}

@for $i from 7 through 12 { 
  @keyframes #{color}#{$i} {
   0% { background: hsla(0, 0, random(100%), .5); }
   20% { background: invert(hsla(0, 0, random(100%), .5)); }
   40% { background: transparentize(hsla(0, 0, random(100%), .5), .9); }
   60% { background: transparentize(hsla(0, 0, random(100%), .5), .1); }
   80% {background: invert(hsla(0, 0, 80%, .8));}
   100% {background: hsla(0, 0, 80%, 1);}
 }
}

// Animation for top cup
@for $i from 1 through 6{
  .pol-pentagon:nth-child(#{$i}){
    animation: translate#{$i} 6s infinite 1s alternate ease-in-out;  
  }

  @if $i == 6{ // making top face
    @keyframes translate#{$i}{
      100%{
        transform:
          scaleY(-1) translateY(($pol_hddh/2)*2) rotateX(#{pi()/2}rad) scaleY(-1) translateY($pol_ri) // move into position

          // Making pentagon
          rotate(#{-$pol_rha1/2}rad)
          skewX(#{$pol_sa1}rad)
          scaleY(cos($pol_sa1)); 
      }
    }
  }

  @else{
    @keyframes translate#{$i}{
      0%, 20%{
        transform:
        scaleY(-1) // transpose to top (mirror)
        translateY($pol_hddh/2) // move up
        rotateY(#{$i*$pol_ca + ($pol_ca/2)}rad) // lateral faces, $i*central angle + central angle/2
        translateZ($pol_ri) // move it out
        rotateX(#{(pi()/2 - $pol_da)}rad) // making the lateral faces slanted with dihedral angle (90 - $pol_da)

        // Making pentagon
        rotate(#{-$pol_rha1/2}rad)
        skewX(#{$pol_sa1}rad)
        scaleY(cos($pol_sa1));
      }

      40%{
        transform:
        scaleY(-1) // transpose to top (mirror)
        translateY($pol_hddh/2) // move up
        rotateY(#{$i*$pol_ca + ($pol_ca/2)}rad) // lateral faces, $i*central angle + central angle/2
        translateZ($pol_ri*2) // move it out
        rotateX(#{(pi()/2 - $pol_da)}rad) // making the lateral faces slanted with dihedral angle (90 - $pol_da)

        // Making pentagon
        rotate(#{-$pol_rha1/2}rad)
        skewX(#{$pol_sa1}rad)
        scaleY(cos($pol_sa1));
      }

      60%{
        transform:
        scaleY(-1) // transpose to top (mirror)
        translateY($pol_hddh/2) // move up
        rotateY(#{$i*$pol_ca + ($pol_ca/2)}rad) // lateral faces, $i*central angle + central angle/2
        translateZ($pol_ri*2) // move it out
        rotateX(#{(pi()/2 - $pol_da)*3}rad); // making the lateral faces slanted with dihedral angle (90 - $pol_da)
      }

      80%{
        transform:
        scaleY(-1) // transpose to top (mirror)
        translateY($pol_hddh/2) // move up
        rotateY(#{-2*($i*$pol_ca + ($pol_ca/2)*3)}rad) // lateral faces, $i*central angle + central angle/2
        translateZ($pol_ri*2) // move it out
        rotateX(#{(pi()/2 - $pol_da)*3}rad); // making the lateral faces slanted with dihedral angle (90 - $pol_da)        
      }


      100%{
        transform: 
        scaleY(-1) // transpose to top (mirror)
        translateY($pol_hddh/2) // move up
        rotateY(#{-2*($i*$pol_ca + ($pol_ca/2)*6)}rad) // lateral faces, $i*central angle + central angle/2
        translateZ($pol_ri) // move it out
        rotateX(#{(pi()/2 - $pol_da)*6}rad); // making the lateral faces slanted with dihedral angle (90 - $pol_da)        
      }
    } 
  }
}

// Animation for bottom cup
@for $i from 7 through 12{
  .pol-pentagon:nth-child(#{$i}){
    animation: translate#{$i} 6s infinite 1s alternate ease-in-out;  
  }
  @if $i == 12{ // making top face
    @keyframes translate#{$i}{
      100%{
        transform:
          translateY(($pol_hddh/2)*2) rotateX(#{pi()/2}rad) translateY($pol_ri) // move into position

          // Making pentagon
          rotate(#{-$pol_rha1/2}rad)
          skewX(#{$pol_sa1}rad)
          scaleY(cos($pol_sa1)); 
      }
    }
  }
  @else {
    @keyframes translate#{$i}{
      0%, 20%{
        transform:
        translateY($pol_hddh/2) // move down
        rotateY(#{$i*$pol_ca + $pol_ca}rad) // lateral faces, $i*central angle + central angle/2. +36deg extra for every face so that bottom cup fit nicely to top
        translateZ($pol_ri) // move it out
        rotateX(#{(pi()/2 - $pol_da)}rad) // making the lateral faces slanted with dihedral angle (90 - $pol_da)

        // Making pentagon
        rotate(#{-$pol_rha1/2}rad)
        skewX(#{$pol_sa1}rad)
        scaleY(cos($pol_sa1));
      }

      40%{
        transform: 
        translateY($pol_hddh/2) // move down
        rotateY(#{$i*$pol_ca + $pol_ca}rad) // lateral faces, $i*central angle + central angle/2. +36deg extra for every face so that bottom cup fit nicely to top
        translateZ($pol_ri*2) // move it out
        rotateX(#{(pi()/2 - $pol_da)}rad) // making the lateral faces slanted with dihedral angle (90 - $pol_da)

        // Making pentagon
        rotate(#{-$pol_rha1/2}rad)
        skewX(#{$pol_sa1}rad)
        scaleY(cos($pol_sa1));
      }

      60%{
        transform: 
        translateY($pol_hddh/2) // move up
        rotateY(#{$i*$pol_ca + ($pol_ca/2)}rad) // lateral faces, $i*central angle + central angle/2
        translateZ($pol_ri*2) // move it out
        rotateX(#{(pi()/2 - $pol_da)*3}rad); // making the lateral faces slanted with dihedral angle (90 - $pol_da)
      }

      80%{
        transform:
        translateY($pol_hddh/2) // move up
        rotateY(#{-2*($i*$pol_ca + ($pol_ca/2)*3)}rad) // lateral faces, $i*central angle + central angle/2
        translateZ($pol_ri*2) // move it out
        rotateX(#{(pi()/2 - $pol_da)*3}rad); // making the lateral faces slanted with dihedral angle (90 - $pol_da)        
      }


      100%{
        transform:
        translateY($pol_hddh/2) // move up
        rotateY(#{-2*($i*$pol_ca + ($pol_ca/2)*6)}rad) // lateral faces, $i*central angle + central angle/2
        translateZ($pol_ri) // move it out
        rotateX(#{(pi()/2 - $pol_da)*6}rad); // making the lateral faces slanted with dihedral angle (90 - $pol_da)        
      }
    } 
  }
}

@keyframes spin {
  100% {
    transform: rotateX(360deg) rotateY(360deg) translateX($pol_a/2) rotateZ(-360deg);
  }
}

@keyframes up {
  0%{ transform: translateY(30rem); }
  100% { transform: translateY(0); }
}
            
          
!
            
              /*
Case Study

"Blackout is a cinematic experience done purely in CSS that explores the phenomenon caused by extinction of lights"

https://www.behance.net/gallery/20910707/Blackout

(Note: This is a just-for-fun project and it is not feasible for actual deployment as there are many performance issues. There are better technologies for similar output)
*/
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console