Как сделать плавное появление блока css

Аватар пользователя Olga Pejenkova
Olga Pejenkova
04 июня 2024

Для создания плавного появления блока CSS можно использовать свойство transition. Это позволяет задать плавный переход для определенных свойств элемента, таких как opacity, height, width и другие.

Пример CSS кода для создания плавного появления блока:

.block {
  opacity: 0; /* Начальное значение непрозрачности */
  transition: opacity 0.5s ease; /* Настройка плавности и время перехода */
}

.block.active {
  opacity: 1; /* Конечное значение непрозрачности */
}

В данном примере при добавлении класса "active" к элементу с классом "block", он будет появляться плавно за 0.5 секунды с эффектом ease.

Также можно добавить другие свойства для transition, например, transition: opacity 0.5s ease-in-out, чтобы задать иную анимацию.

Таким образом, использование свойства transition в CSS позволяет создать плавное появление блока на веб-странице.

1 0

Есть что добавить? Зарегистрируйтесь

или войдите в аккаунт

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»

Курсы по программированию в Хекслете

Backend-разработка

Разработка серверной части сайтов и веб-приложений

Frontend-разработка

Разработка внешнего интерфейса сайтов и веб-приложений и верстка

Создание сайтов

Разработка сайтов и веб-приложений на JS, Python, Java, PHP и Ruby on Rails

Тестирование

Ручное тестирование и автоматизированное тестирование на JS, Python, Java и PHP

Аналитика данных

Сбор, анализ и интерпретация данных на Python

Интенсивные курсы

Интенсивное обучение для продолжающих

DevOps

Автоматизация настройки локального окружения и серверов, развертывания и деплоя

Веб-разработка

Разработка, верстка и деплой сайтов и веб-приложений, трудоустройство для разработчиков

Математика для программистов

Обучение разделам математики, которые будут полезны при изучении программирования

JavaScript

Разработка сайтов и веб-приложений и автоматизированное тестирование на JS

Python

Веб-разработка, автоматическое тестирование и аналитика данных на Python

Java

Веб-разработка и автоматическое тестирование на Java

PHP

Веб-разработка и автоматическое тестирование на PHP

Ruby

Разработка сайтов и веб-приложений на Ruby on Rails

Go

Курсы по веб-разработке на языке Go

HTML

Современная верстка с помощью HTML и CSS

SQL

Проектирование базы данных, выполнение SQL-запросов и изучение реляционных СУБД

Git

Система управления версиями Git, регулярные выражения и основы командой строки

Бесплатные курсы

Бесплатные курсы по тестированию, дата-аналитике, верстке, программированию на Python, Java, PHP и JavaScript.

Похожие вопросы