_animations.scss

// home-header-pop-up animation
//************************************************************************//

.animation-home-header-pop-up {
  @include animation(home-header-pop-up 1.15s ease-in-out);
  @include animation-fill-mode(both);
  @include animation-delay(1s);
}

@mixin home-header-pop-up-keyframes {
  0% {
    opacity: 0.0;
    top: 300px;
    //@include transform(scale(0.9));
  }
  45% {
    opacity: 1.0;
  }
  65% {
    top: -40px;
    //@include transform(scale(1));
  }
  85% {
    top: 10px;
  }
  100% {
    top: 0px;
  }
}

@-webkit-keyframes home-header-pop-up { @include home-header-pop-up-keyframes; }
   @-moz-keyframes home-header-pop-up { @include home-header-pop-up-keyframes; }
        @keyframes home-header-pop-up { @include home-header-pop-up-keyframes; }

// title appear animation
//************************************************************************//

.animation-title-appear {
  @include animation(title-appear 4.65s ease-out);
  @include animation-fill-mode(both);
  @include animation-delay(1s);
}

@mixin title-appear-keyframes {
  0% {
    opacity: 0.0;
    top: 60px;
    @include transform(scale(0.9));
  }
  20% {
    opacity: 1.0;
  }
  27% { // this % of total-time should be ~ 1.25s
    top: 40px;
    @include transform(scale(1));
  }
  90% { // this % of total-time is when 2nd half of animation starts
    opacity: 1.0;
    top: 40px;
    @include transform(scale(1));
  }
  100% {
    top: 0px;
  }
}

@-webkit-keyframes title-appear { @include title-appear-keyframes; }
   @-moz-keyframes title-appear { @include title-appear-keyframes; }
        @keyframes title-appear { @include title-appear-keyframes; }

// home appear animation
//************************************************************************//

.animation-home-appear {
  @include animation(home-appear 4.25s ease-out);
  @include animation-fill-mode(both);
  @include animation-delay(1s);
}

@mixin home-appear-keyframes {
  0% {
    opacity: 0.0;
    top: 60px;
    @include transform(scale(0.9));
  }
  20% {
    opacity: 1.0;
  }
  30% { // this % of total-time should be ~ 1.25s
    top: 40px;
    @include transform(scale(1));
  }
  80% { // this % of total-time is when 2nd half of animation starts
    opacity: 1.0;
    top: 40px;
    @include transform(scale(1));
  }
  100% {
    opacity: 0.0;
    top: 60px;
    @include transform(scale(0.7));
  }
}

@-webkit-keyframes home-appear { @include home-appear-keyframes; }
   @-moz-keyframes home-appear { @include home-appear-keyframes; }
        @keyframes home-appear { @include home-appear-keyframes; }

// edx animation
//************************************************************************//

.animation-edx-appear {
  @include animation(edx-appear 1.25s ease-in);
  @include animation-fill-mode(both);
  @include animation-delay(2.15s);
}

@mixin edx-appear-keyframes {
  0% {
    opacity: 0.0;
  }
  100% {
    opacity: 1.0;
  }
}

@-webkit-keyframes edx-appear { @include edx-appear-keyframes; }
   @-moz-keyframes edx-appear { @include edx-appear-keyframes; }
        @keyframes edx-appear { @include edx-appear-keyframes; }

// mit animation
//************************************************************************//

.animation-mit-slide {
  @include animation(mit-slide 1.15s ease-out);
  @include animation-fill-mode(both);
  @include animation-delay(2s);
}

@mixin mit-slide-keyframes {
  0% {
    left: 80px;
  }
  100% {
    left: 0px;
  }
}

@-webkit-keyframes mit-slide { @include mit-slide-keyframes; }
   @-moz-keyframes mit-slide { @include mit-slide-keyframes; }
        @keyframes mit-slide { @include mit-slide-keyframes; }

// harvard animation
//************************************************************************//

.animation-harvard-slide {
  @include animation(harvard-slide 1.15s ease-out);
  @include animation-fill-mode(both);
  @include animation-delay(2s);
}

@mixin harvard-slide-keyframes {
  0% {
    right: 80px;
  }
  100% {
    right: 0px;
  }
}

@-webkit-keyframes harvard-slide { @include harvard-slide-keyframes; }
   @-moz-keyframes harvard-slide { @include harvard-slide-keyframes; }
        @keyframes harvard-slide { @include harvard-slide-keyframes; }

// divider left animation
//************************************************************************//

.animation-divider-left-slide {
  @include animation(divider-left-slide 1.1s ease-out);
  @include animation-fill-mode(both);
  @include animation-delay(2s);
}

@mixin divider-left-slide-keyframes {
  0% {
    left: 340px;
  }
  100% {
    left: 200px;
  }
}

@-webkit-keyframes divider-left-slide { @include divider-left-slide-keyframes; }
   @-moz-keyframes divider-left-slide { @include divider-left-slide-keyframes; }
        @keyframes divider-left-slide { @include divider-left-slide-keyframes; }

// divider right animation
//************************************************************************//

.animation-divider-right-slide {
  @include animation(divider-right-slide 1.1s ease-out);
  @include animation-fill-mode(both);
  @include animation-delay(2s);
}

@mixin divider-right-slide-keyframes {
  0% {
    left: 340px;
  }
  100% {
    left: 480px;
  }
}

@-webkit-keyframes divider-right-slide { @include divider-right-slide-keyframes; }
   @-moz-keyframes divider-right-slide { @include divider-right-slide-keyframes; }
        @keyframes divider-right-slide { @include divider-right-slide-keyframes; }

// video appear animation
//************************************************************************//

.animation-video-appear {
  @include animation(video-appear 1.25s ease-out);
  @include animation-fill-mode(both);
  @include animation-delay(4.4s);
}

@mixin video-appear-keyframes {
  0% {
    bottom: -270px;
    opacity: 0.9;
  }
  80% {
    opacity: 1.0;
  }
  100% {
    bottom: 0px;
  }
}

@-webkit-keyframes video-appear { @include video-appear-keyframes; }
   @-moz-keyframes video-appear { @include video-appear-keyframes; }
        @keyframes video-appear { @include video-appear-keyframes; }