terraform/website/source/stylesheets/_jumbotron.less

//
// Jumbotron
// --------------------------------------------------

#jumbotron-mask{
  position:relative;
  height: @jumbotron-total-height;
  margin-top: @negative-hero-margin;
  background-color: black;
}

#jumbotron {
  position: relative;
  height: @jumbotron-total-height;
  padding-top: 0;
  padding-bottom: 0;
  color: @jumbotron-color;

  .container {
    position:relative;
    height:700px;
  }

  .terraform-canvas {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    /* background-color:#000; */
    opacity:0;

    -webkit-transition:opacity 2s ease-out;
       -moz-transition:opacity 2s ease-out;
        -ms-transition:opacity 2s ease-out;
         -o-transition:opacity 2s ease-out;
            transition:opacity 2s ease-out;

    -webkit-transform:translate3d(0,0,0);
       -moz-transform:translate3d(0,0,0);
        -ms-transform:translate3d(0,0,0);
         -o-transform:translate3d(0,0,0);
            transform:translate3d(0,0,0);
  }

  .logo-container {
    position:absolute;
    z-index:999;
    top:0;
    left:0;
    right:0;
    bottom:0;

    -webkit-transform:translate3d(0,0,0);
  }

  #image {
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;

    background-image:url(../images/bg-galaxy.jpg);
    background-size:cover;
    background-position:50% 50%;
    opacity:0;

    -webkit-transition:
      opacity 6s ease-out,
      -webkit-transform 20s ease-out;
    -moz-transition:
      opacity 6s ease-out,
      -moz-transform 20s ease-out;
    -ms-transition:
      opacity 6s ease-out,
      -ms-transform 20s ease-out;
    -o-transition:
      opacity 6s ease-out,
      -o-transform 20s ease-out;
    transition:
      opacity 6s ease-out,
      transform 20s ease-out;

    -webkit-transform:translate3d(0,0,0) scale(0.7);
       -moz-transform:translate3d(0,0,0) scale(0.7);
        -ms-transform:translate3d(0,0,0) scale(0.7);
         -o-transform:translate3d(0,0,0) scale(0.7);
            transform:translate3d(0,0,0) scale(0.7);
  }
}

.animated-logo {
  position:absolute;
  z-index:200;
  top:50%;
  left:50%;
  width:140px;
  height:140px;
  margin:-28px 0 0 -115px;
  opacity:1;

  -webkit-transition:-webkit-transform 300ms ease-in-out;

  -webkit-transform-origin:50% 50%;
  -webkit-transform-style:preserve-3d;
  -webkit-transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1);
}

.state-one .animated-logo {
  -webkit-transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1);
}

.state-one.state-two.state-three.state-four .animated-logo {
  -webkit-transform-origin:100% 0;
  -webkit-transform:translate3d(0,10px,0) rotateY(-45deg) skewY(22deg) scale(1.26,1);
}

.state-one.state-two.state-three.state-four .white-block {
  background-color:rgba(255,255,255,1);
}

.white-block {
  position:absolute;
  width:68px;
  height:68px;

  -webkit-box-sizing:border-box;
     -moz-box-sizing:border-box;
          box-sizing:border-box;

  /* background-color:rgba(255,0,0,0.3); */
  background-color:#fff;
  background-color:rgba(255,255,255,0);

  border:1px solid #fff;

  -webkit-transition:
    opacity           300ms ease-out,
    -webkit-transform 300ms ease-out,
    background-color  300ms ease-out;
}

.block-one,
.block-two,
.block-three,
.block-four {
  top:0;
  left:72px;

  -webkit-transform-origin:50% 50%;
  -webkit-transform:translate3d(0,0,0);
}

.block-one {
  opacity:0;
  -webkit-transform:translate3d(0,0,0) scale(0,0);
}

.block-two {
  opacity:0;
  top:0;
  left:0;
  -webkit-transform:translate3d(0,0,0) scale(0,0);
}

.block-three {
  opacity:0;
  top:72px;
  /* -webkit-transform:translate3d(0,-100px,0) scaleY(1); */
  -webkit-transform:translate3d(0,0,0) scale(0,0);
}

.block-four {
  -webkit-transform-origin:0 0;
  -webkit-transform:translate3d(72px,-2px,0) rotateY(90deg) skewY(-22deg) scaleX(1.25);
}

.state-one.state-two .block-one {
  opacity:1;
  -webkit-transform:translate3d(0,0,0) scale(1,1);
  /* -webkit-animation:PopIn 300ms 1 ease-in; */
  /* animation:PopIn 300ms 1 ease-in; */
}

.state-one .block-two {
  opacity:1;
  -webkit-transform:translate3d(0,0,0) scale(1,1);
  /* -webkit-animation:PopIn 300ms 1 ease-in; */
  /* animation:PopIn 300ms 1 ease-in; */
}

.state-one.state-two.state-three .block-three {
  opacity:1;
  -webkit-transform:translate3d(0,0,0) scale(1,1);
  /* -webkit-animation:PopIn 300ms 1 ease-in; */
  /* animation:PopIn 300ms 1 ease-in; */
}

@-webkit-keyframes PopIn {
  0% {
    opacity:0;

    -webkit-transform:translate3d(0,0,0) scale(0);

    -webkit-animation-timing-function:ease-out;
    animation-timing-function:ease-out;
  }
  40% {
    opacity: 1;

    -webkit-transform:translate3d(0,0,0) scale(1.2);

    -webkit-animation-timing-function:ease-out;
    animation-timing-function:ease-out;
  }
  70% {
    opacity: 1;

    -webkit-transform:translate3d(0,0,0) scale(0.90);

    -webkit-animation-timing-function:ease-out;
    animation-timing-function:ease-out;
  }
  100% {
    opacity: 1;


    -webkit-transform:translate3d(0,0,0) scale(1);
  }
}