Gecko [ gandhischool.edu.np ]

Name	Size	Permission
_animation.scss	1.3 KB	-rw-r--r--
_responsive.scss	1.82 KB	-rw-r--r--
_typography.scss	5.92 KB	-rw-r--r--
_variables.scss	403 B	-rw-r--r--
style.scss	10.55 KB	-rw-r--r--

Code Editor : _animation.scss

// Default animation duration
$animation-duration: 1s;
$animation-timing: ease-in-out;

// Mixin for common animation styles
@mixin animation($name, $delay: 0s) {
  animation: #{$name} $animation-duration $animation-timing forwards;
  animation-delay: $delay;
}

// Fade In
.fade-in {
  opacity: 0;
  @include animation(fadeIn);
}

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

// Fade Right
.fade-right {
  opacity: 0;
  transform: translateX(-100%);
  @include animation(fadeRight);
}

@keyframes fadeRight {
  0% { opacity: 0; transform: translateX(-100%); }
  100% { opacity: 1; transform: translateX(0); }
}

// Fade Left
.fade-left {
  opacity: 0;
  transform: translateX(100%);
  @include animation(fadeLeft);
}

@keyframes fadeLeft {
  0% { opacity: 0; transform: translateX(100%); }
  100% { opacity: 1; transform: translateX(0); }
}

// Fade Bottom
.fade-bottom {
  opacity: 0;
  transform: translateY(-100%);
  @include animation(fadeBottom);
}

@keyframes fadeBottom {
  0% { opacity: 0; transform: translateY(-100%); }
  100% { opacity: 1; transform: translateY(0); }
}

// Fade Top
.fade-top {
  opacity: 0;
  transform: translateY(100%);
  @include animation(fadeTop);
}

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

${this.title}

Code Editor : _animation.scss