<commit_before>// Triggers a fade-up animation when the element enters the viewport.
//
// Styleguide 5.1 - Fade up on Scroll
.js-fade-up-on-scroll {
  opacity: 0;
}

.come-in {
  @include transform(translateY(150px));
  @include animation(come-in 2s ease forwards);
  @include transition(opacity 0.25s);
  opacity: 1;
}

.come-in:nth-child(odd) {
  @include animation-duration(1.5s); // so animation on multiple items are staggered
}

.already-visible {
  @include transform(translateY(0));
  @include animation(none);
  opacity: 1;
}

@include keyframes(come-in) {
  to { @include transform(translateY(0)); }
}

// Element subtly bounces to grab the users attention.
//
// Styleguide 5.2 - Bounce
.animation-bounce {
  @include animation(bounce 1.5s ease infinite alternate);
}

@include keyframes(bounce) {
  to { @include transform(translateY(10px)); }
}

// Element subtly bounces to grab the users attention.
//
// Styleguide 5.3 - Slide In (Fast)
.slide-in-fast {
  @include transform(translateY(150px));
  @include animation(slide-in-fast 0.25s ease forwards);
  @include transition(opacity 0.25s);
  opacity: 0;
}

@include keyframes(slide-in-fast) {
  to { @include transform(translateY(0)); opacity: 1; }
}

// Element subtly bounces to grab the users attention.
//
// Styleguide 5.2 - Fade In
.fade-in {
  @include animation(fade-in 0.25s ease forwards);
  @include transition(opacity 0.25s);
  opacity: 0;
}

@include keyframes(fade-in) {
  to { opacity: 1; }
}


// -----------------------------------------------------------------

.animated {
  @include animation-fill-mode(both);
  @include animation-duration(0.5s);
}

.animated.hinge {
  @include animation-duration(0.5s);
}

@include keyframes(tada) {
  0% { transform: scale(1); }
  10%, 20% { transform: scale(0.9) rotate(-3deg); }
  30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
  40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); }
  100% { transform: scale(1) rotate(0); }
}

.tada {
  @include animation-name(tada);
}

@include keyframes(wobble) {
  0% { transform: translateX(0); }
  15% { transform: translateX(-25%) rotate(-5deg); }
  30% { transform: translateX(20%) rotate(3deg); }
  45% { transform: translateX(-15%) rotate(-3deg); }
  60% { transform: translateX(10%) rotate(2deg); }
  75% { transform: translateX(-5%) rotate(-1deg); }
  100% { transform: translateX(0); }
}

.wobble {
  @include animation-name(wobble);
}

@include keyframes(fadeIn) {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

.fade-in {
  @include animation-name(fadeIn);
}

@include keyframes(fadeInUp) {
  0% {
    opacity: 0;
    @include transform(translateY(20px));
  }

  100% {
    opacity: 1;
    @include transform(translateY(0));
  }
}

.fade-in-up {
  @include animation-name(fadeInUp);
}

@include keyframes(fadeOut) {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

.fade-out {
  @include animation-name(fadeOut);
}

@include keyframes(fadeOutDown) {
  0% {
    opacity: 1;
    @include transform(translateY(0));
  }

  100% {
    opacity: 0;
    @include transform(translateY(20px));
  }
}

.fade-out-down {
  @include animation-name(fadeOutDown);
}<commit_msg>Updated animations.<commit_after>// Default animation settings. May be overriden in specific animation classes.
%animated {
  @include animation-fill-mode(both);
  @include animation-duration(0.5s);
}


// Element fades in.
//
// Styleguide 5.1 - Fade In
.fade-in {
  @extend %animated;
  @include animation-name(fadeIn);
}

@include keyframes(fadeIn) {
  0% {opacity: 0;}
  100% {opacity: 1;}
}


// Element fades in and up.
//
// Styleguide 5.2 - Fade In Up
.fade-in-up {
  @extend %animated;
  @include animation-name(fadeInUp);
}

@include keyframes(fadeInUp) {
  0% {
    opacity: 0;
    @include transform(translateY(20px));
  }

  100% {
    opacity: 1;
    @include transform(translateY(0));
  }
}


// Element fades out.
//
// Styleguide 5.3 - Fade Out
.fade-out {
  @extend %animated;
  @include animation-name(fadeOut);
}

@include keyframes(fadeOut) {
  0% {opacity: 1;}
  100% {opacity: 0;}
}


// Element fades out and down.
//
// Styleguide 5.4 - Fade Out Down
.fade-out-down {
  @extend %animated;
  @include animation-name(fadeOutDown);
}

@include keyframes(fadeOutDown) {
  0% {
    opacity: 1;
    @include transform(translateY(0));
  }

  100% {
    opacity: 0;
    @include transform(translateY(20px));
  }
}


// "Wiggle" animation used to pull the user's attention to an element.
//
// Styleguide 5.5 - Tada
.tada {
  @extend %animated;
  @include animation-name(tada);
}

@include keyframes(tada) {
  0% { transform: scale(1); }
  10%, 20% { transform: scale(0.9) rotate(-3deg); }
  30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
  40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); }
  100% { transform: scale(1) rotate(0); }
}


// Kind of like a "womp womp".
//
// Styleguide 5.6 - Wobble
.wobble {
  @extend %animated;
  @include animation-duration(1s);
  @include animation-name(wobble);
}

@include keyframes(wobble) {
  0% { @include transform(translateX(0)); }
  15% { @include transform(translateX(-25%) rotate(-5deg)); }
  30% { @include transform(translateX(20%) rotate(3deg)); }
  45% { @include transform(translateX(-15%) rotate(-3deg)); }
  60% { @include transform(translateX(10%) rotate(2deg)); }
  75% { @include transform(translateX(-5%) rotate(-1deg)); }
  100% { @include transform(translateX(0)); }
}


// Shake animation (similar to OS X convention for form errors).
//
// Styleguide 5.7 - Fade In
@include keyframes(shake) {
	0%, 100% { @include transform(translateX(0)); }
	10%, 30%, 50%, 70%, 90% { @include transform(translateX(-10px));}
	20%, 40%, 60%, 80% { @include transform(translateX(10px));}
}

.shake {
  @extend %animated;
  @include animation-duration(1s);
  @include animation-name(shake);
}
{'fraction_non_alphanumeric': 0.18136410609714088, 'fraction_numerical': 0.04874267998622115, 'mean_word_length': 3.477255204317656, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3280106', 'n_tokens_mistral': 2325, 'n_tokens_neox': 2114, 'n_words': 501}