edx-platform/lms/static/sass/base/_animations.scss

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

/* stylelint-disable */

.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;
    top: 300px;
    //@include transform(scale(0.9));
  }

  45% {
    opacity: 1;
  }

  65% {
    top: -40px;
    //@include transform(scale(1));
  }

  85% {
    top: 10px;
  }

  100% {
    top: 0;
  }
}

@-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;
    top: 60px;

    @include transform(scale(0.9));
  }

  20% {
    opacity: 1;
  }

  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;
    top: 40px;

    @include transform(scale(1));
  }

  100% {
    top: 0;
  }
}

@-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;
    top: 60px;

    @include transform(scale(0.9));
  }

  20% {
    opacity: 1;
  }

  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;
    top: 40px;

    @include transform(scale(1));
  }

  100% {
    opacity: 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;
  }

  100% {
    opacity: 1;
  }
}

@-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: 0;
  }
}

@-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: 0;
  }
}

@-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;
  }

  100% {
    bottom: 0;
  }
}

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

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

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

// quick fade-in animation to get user attention
//************************************************************************//

.is-fading-in {
  @include animation(fade-in-animation 0.8s);
}

@mixin fade-in-keyframes {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fade-in-animation { @include fade-in-keyframes; }

@-moz-keyframes fade-in-animation { @include fade-in-keyframes; }

@keyframes fade-in-animation { @include fade-in-keyframes; }


// +utility animations
// --------------------
// pulse - double + fade out
@include keyframes(pulse-out) {
  0%, 100% {
    opacity: 0;
  }

  25%, 75% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}