Анимируй это! Анимация всплывающих окон используя только css

Публикация в группе: Otshelnik-Fm - мои работы (код, плагины, дополнения, статьи и руководства)

В прошлой статье "Фокусируем внимание пользователя на модальном окне. Блюр под ним или уменьшение интенсивности цвета", я писал уже про модальные окна и эффекты к ним.

Там некоторых ситуациях необходимо было написать простейший js код. В этой статье только CSS

Идея анимаций не нова, и я не первый кто про них пишет. Но тут мы работаем с WP-Recall, поэтому я покажу как использовать анимации применительно к всплывающему окну входа и регистрации. А у реколл всплывающая форма не только у формы авторизации

Эту технику я использовал в бесплатном Float Chat и в премиум дополнении личного кабинета Across Ocean PRO. Делюсь с вами.

Начало:

Теории не будет – интернет ею завален. Сразу в бой:

Определяем класс всплывающего блока который мы анимируем. Если вы не умеете работать с консолью разработчика - учитесь
Применяем к нему анимацию и время ее действия
Анимация – это ключевые кадры от 0% до 100% - можно их наплодить сколь угодно и все выходит очень просто.

Класс всплывающего блока определили, теперь применим к нему css. Эффект когда форма сверху вниз опустится, с плавным появлением:

.panel_lk_recall.floatform {
    animation-duration: 0.55s;  /* Время работы анимации */
    animation-fill-mode: both;  /* Поведение анимации */
    animation-name: fadeInDown; /* Имя анимации */
}

@keyframes fadeInDown { /* Сама анимация */
    0% {                /* Старт анимации */
        opacity: 0;
        transform: translate3d(0px, -100%, 0px);
    }
    100% {              /* в финале анимации - финал это заданная 0.55s */
        opacity: 1;
        transform: none;
    }
}

Вписываем это в ваш стилевой файл, сохраняем - смотрим.

Не знаете куда вставить стили чтобы не затерлись после обновления? Посмотрите в сторону Alpha fixator - на своем сайте я пишу в него небольшие правки и сниппеты.

Все. Больше ничего.

Демо анимации всплывающей формы входа и регистрации

На просторах интернета я нашел на гитхабе большой список анимаций (14 видов). Но к сожалению кому он принадлежал, сейчас не вспомню - если вы укажете на него линк - добавлю в эту статью.

Скачивайте этот список, делайте ваши сайты удобными и красивыми. Дьявол в мелочах!