Login
Animations

Default animation

19 Sep 2022

HTML
SCSS 
                            <h1 class="title-404 animated slide-down">Page not found</h1>
<p class="text-404 animated slide-right">
      The page may have changed the address or never existed
</p>
<a class="btn animated slide-up" href="./index.html"> Home page </a>
                        
                            .animated {
    opacity: 0;
}

.slide-left {
    opacity: 0;
    animation: slide-left 1.5s forwards;
}

.slide-right {
    opacity: 0;
    animation: slide-right 1.5s forwards;
}

.slide-down {
    opacity: 0;
    animation: slide-down 1.5s forwards;
}

.slide-up {
    opacity: 0;
    animation: slide-up 1.5s forwards;
}

.fade-in {
    opacity: 0;
    animation: fade-in 1.5s forwards;
}

.pulse {
    animation: pulse 0.3s forwards;
}

@keyframes slide-left {
    0% {
        opacity: 0;
        transform: translateX(20px);
    }

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

@keyframes slide-right {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }

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

@keyframes slide-up {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

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

@keyframes slide-down {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }

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

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

    100% {
        opacity: 1;
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

У збірці присутні стандартні стартові анімації появи елементів (копіювати scss не обовязково він наведений для того якщо у вас немає) типу fade-in, slide-up і т.д. розміщені у файлі variables.pcss

Для застосування потрібно додати 2 класи до елемента який потрібно анімувати (приклад на сторінці 404), а також для елементів які динамічно створюються через js, можна пронаслідувати ці класи в scss/pcss через @extend

Приклад для select2 дропдавна:

.select2-container--open .select2-dropdown--below{ 
  @extend .fade-in; 
}

1-й клас .animated - потрібно для кращого відтворення анімації (не обовязковий)

2-й клас ідентифікує сам стиль анімації (.slide-left, .slide-right, .slide-down, .slide-up, .fade-in, .pulse);

Рекомендовано додавати ці класи до елементів які будуть появлятись на екрані чи при переході від стану display:none до стану display: block; (flex і т.д.) тобто появлятись.

НЕ РЕКОМЕНДОВАНО! застосовувати класи анімації до елементів які будуть анімуватися через JS анімацію JS анімаця ПРАЦЮВАТИ НЕ БУДЕ!

0