# Animation Helper Classes

TIP

Some animation helper classes do not work without additional javascript.

# Spinner Animation

TIP

.h-spinner

hide code

<i class="fa fa-spinner-third h-spinner"></i>

# Fade-In Animation

TIP

Doesn't work without javascript - the class .h-fade-in has to be added when e.g. the DOM element scrolls into view.

.h-fade-in-before {
  opacity: 0;
  transform: translateY(100px);
  transition: all $transition-duration-slow ease-out;
}

.h-fade-in {
  opacity: 1;
  transform: translateY(0);
}

1
2
3
4
5
6
7
8
9
10

# Animate Width Animation

.h-animate-width

@mixin animateWidth($duration: 100000s) {
  animation: widthAnimation $duration ease-in; // duration can be set via "animation-duration"
  animation-fill-mode: both;
}

1
2
3
4

Example:

hide code

<div class="c-progress">
    <div class="c-progress__bar -animate" style="animation-duration: 80s"></div>
</div>

← Size Helper Classes Random Helper Classes →