Анімація появи блоку за допомогою CSS

Опублікував(а): Масальська Анастасія
Оновлено: 18.03.2024

Анімація появи блоку за допомогою CSS може застосовуватися з різними ефектами. Існують різні методи застосування принципів CSS для створення плавних анімацій та ефектів на веб-сайті.

Наприклад:

Анімація появи блоку за допомогою CSS
Анімація появи блоку за допомогою CSS

Такі заходи дозволяють втілити в життя безліч креативних ідей для поліпшення досвіду користувача на веб-сайті.

Замітка! Дізнайтеся, як робиться стилізація file input та спробуйте налаштувати це самостійно або скористайтеся плагіном.


Плавна анімація з’явлення блоку за допомогою CSS при натисканні

Давайте розглянемо спосіб створення плавного з’явлення блоку за допомогою CSS при натисканні. У цьому прикладі ми використовуємо <input type=”checkbox”>. Сам ввід буде прихований, а ми будемо використовувати його через тег label.

Видимість вмісту блоку #content буде залежати від стану checkbox-y #toggle.

1. Створюємо елемент <input type=”checkbox”> разом з міткою <label> для створення тригера, який буде активувати анімацію з’явлення вмісту.

  <input type="checkbox" id="toggle">
  <label for="toggle" id="toggleLabel">View details <span>🢒</span></label>
  <div id="content">
    <h3>Hidden content</h3>
    <p>Content that appears and disappears with animation</p>
  </div>

2. Тепер використовуємо CSS для оформлення текстових блоків та додаємо логіку з’явлення та приховування при натисканні на мітку. Для цього використовуємо псевдоклас CSS :checked, щоб визначити, коли перемикач вже вибраний.

#toggle {
  display: none;
}
#toggleLabel{
  cursor: pointer;
  font-weight: 600;
  color:#0A3F64;
  font-size:26px; 
}
#content {
  opacity: 0;
  height: 0;
  width:200px;
  transition:  opacity .5s ease-in-out, height .5s ease-in-out ;
  color:#0A3F64;
  border-radius: 8px;
  border:2px solid #0A3F64;
  padding:0 10px;
  margin-bottom: 10px;
  background: #fff;
}
#content h3{
  margin-bottom: 10px;
}

#toggle:checked ~ #content {
  height: 120px;
  opacity: 1;
}
#toggle:not(:checked) ~ #content {
  height:0;
  opacity: 0;
  border:2px solid transparent;
}
#toggleLabel span {
  transform: rotate(90deg);
  margin-left: 10px;
  display: inline-block;
  font-size: 30px;
  position: relative;
  top: 8px;
  color:#0A3F64;
}

В результаті ви отримаєте такий результат, натисніть на посилання нижче, щоб переглянути:

Hidden content

Content that appears and disappears with animation. Where can it be used:

  • Interactive menu
  • Folding sections
  • Modal Dialogs

Плавна анімація появи блоку за допомогою CSS під час наведення

Далі описано створення плавної появи блоку за допомогою CSS при наведенні. Для цього нам слід виконати такі покрокові дії:

Крок 1. Для початку створимо два блоки. Перший буде видимим і плавно з’являтиметься на сторінці, а другий буде прихованим:

<div class="on-hover">
Visible
</div>
<div class="hidden-block">
Hidden
</div>

Крок 2. Задамо стилі для наших блоків:

.on-hover {
    width:200px;
    background: #176387; 
    color:#fff; 
    font-size:20px;
    border: 3px solid #2BA2DB; 
    padding:10px; 
    margin:auto;
    margin-bottom:10px; 
    text-align:center;
}
.hidden-block{
    width:200px;
    background: #176387; 
    color:#fff;
    font-size:20px;
    border: 3px solid #2BA2DB; 
    padding:10px;
    margin: auto;
    text-align:center;
    opacity:0;
    transition: 25;
}

Для прихованого блоку ми встановлюємо повну прозорість за допомогою властивості opacity: 0, а також задаємо швидкість переходу між його станами за допомогою transition: 2s. Зверніть увагу, що швидкість переходу станів елемента встановлена ​​на 2 секунди.

Крок 3. Потім ми переходимо до ключового кроку. Використовуючи .on-hover:hover + .hidden-block, ми налаштовуємо ефект так, щоб при наведенні на елемент з класом .on-hover застосовувалися стилі до елемента .hidden-block. Цей елемент стає видимим, оскільки змінюємо його прозорість.


.on-hover:hover+ .hidden-block{
    opacity:1;
    transition: 1s;
}

Зверніть увагу! Оскільки блок із класом .hidden-block не є дочірнім елементом .on-hover, нам необхідно використовувати селектор hover з оператором +. Таким чином, прихований елемент розташовуватиметься поза елементом, на який відбувається наведення курсора. Для цього ми використовуємо селектор .on-hover:hover + .hidden-block.

Результат анімації появи блоку за допомогою CSS:

Visible
Hidden

Створення анімації появи блоку з тимчасовою затримкою

Тепер переходимо до створення плавної появи блоку за допомогою CSS та тимчасової затримки з використанням правила @keyframes.

Крок 1. Створимо блок із прозорістю за замовчуванням:

<div class="anim-show">
Smooth appearance of the Css block
</div>

Крок 2. Задаємо властивість animation, де вказано назву анімації (show), її тривалість (2 секунди) та кількість повторень (1). Щоб зберегти вигляд елемента після завершення анімації, ми встановимо значення both для якості animation-fill-mode. Також вкажемо додаткову властивість animation-delay, щоб відкласти початок анімації на 2 секунди.

.anim-show{ 
    width:300px;
    background:#176387; 
    color:#fff;
    font-size:20px;
    border: 3px solid #2BA2DB;
    padding:35px 10px;
    margin:auto;
    margin-bottom:10px;
    text-align:center;
    opacity:0; 
    transition: 25;
    animation: show 3s 1;
    animation-fill-mode: both; 
    -webkit-animation-fill-mode:both;
    animation-delay: 2s; 
}

Крок 3. Через правило @keyframes ми надаємо властивості елементу в проміжку часу від 0% до 100% протягом 0 до 2 секунд (в цьому випадку “animation-delay: 2s”).

@keyframes show{0%{
opacity:0;
}
100% {
opacity:1;
}
}
Обновить
Smooth appearance of the Css block

Плавна поява блоку CSS

Після вивчення покрокової інструкції ви, ймовірно, зможете легко налаштувати анімацію плавної появи блоку CSS. Однак, якщо у вас виникнуть додаткові питання або коментарі, не соромтеся зв’язатися з нами через форму зворотного зв’язку.

Замітка! Дізнайтеся, як робиться стилізація скролла (scroll) з використанням CSS у різних браузерах.

Не пропустите эти статьи

Як зробити адаптивне відео YouTube на CSS

Розглянемо кілька способів, як зробити адаптивне відео YouTube на CSS та помістити на сайт таким…
Блокова модель у CSS висота блоку та пропорції

Блокова модель у CSS: висота блоку та пропорції

Блокова модель CSS (box model) застосовується до елементів, які розглядаються як блоки, визначаючи, як різні…

Висота блоку залежно від ширини: висота та пропорції на CSS

Висота блоку залежно від ширини визначається в різних одиницях CSS: дюймах (in), пікселях (px), пунктах…

Використовуємо CSS у створенні геометричних фігур: 13 прикладів нескладних форм

Одне з нововведень у CSS, що захоплює, це можливість використання меншої кількості зображень у веб-дизайні…