Как сделать плавное исчезновение css

Обновлено: 08.07.2024

Пример HTML структуры. Два блока: первый видимый, при наведении на который будем плавно показывать второй (скрытый) элемент.

Всплывающий блок может содержать абсолютно любой контент: текст, картинку, видео и т.п.

Плавность появления и исчезновения работает за счёт добавления transition к свойствам opaciy и visibility

До скрытого элемента мы добрались с помощью родственного селектора ~ (тильда). Также можно было обратиться при помощи соседнего селектора + или дочернего >

Пример с более сложной структурой

Допустим, у нас следующая структура

Тогда CSS будет следующий

Таким образом, используя различные селекторы мы можем обратиться к последующим элементам для дальнейшей работы с ними.

Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.

Ниже эта статья даст вам краткое введение в метод создания исчезновения в эффекте выцветания при использовании загрузки CSS, я надеюсь помочь всем.

Если вы хотите создать исчезновение на загрузке страницы, вы можете использовать свойство CSS Animation или свойство перехода для создания исчезновения на странице. Давайте познакомимся с примером.

Способ 1: Использование свойства анимации CSS

Анимация CSS определяется 2 ключевыми кадрами: непрозрачность устанавливается на 0, а другая непрозрачность установлена на 1. Это свойство применяется к тегу организма; когда тип анимации устанавливается, анимация будет плавно исчезать на странице. Всякий раз, когда страница загружена, эта анимация будет играть, страница появится. Исчезновение во времени также может быть установлено в атрибуте анимации.

Грамматика:

Плавное изменение цвета
Плавное затухание
Плавное увеличение — уменьшение
Плавное перемещение
Плавный поворот

В CSS3 появились новые функции, благодаря которым можно делать целые анимационные пейзажи. Например облако тегов. Производители браузеров стараются быть впереди всех этих разработок и делают все возможное, чтобы все новые функции хорошо работали в их браузерах. Но не все производители браузеров одинаково хороши, о чем мы с вами поговорим немного позже.

Плавное изменение цвета

Для примера создадим HTML документ и поместим в него блок div

Плавное изменение цвета происходит за счет применения свойства transition, что в переводе означает переход или превращение. И это превращение происходит за 1 секунду, как указано в значении. Linear можно поменять на ease и переход будет чуть быстрее. Смотрим пример.

Плавное затухание

CSS код пишем примерно тот же самый, только свойство указываем — all, то есть ко всему, что последует после псевдокласса hover, будет применена плавность. В нашем случае это затухание. Блок изменит прозрачность при наведении на 50%.

Плавное увеличение

Здесь все то же самое. Только в примере я установил значение linear вместо ease. Устанавливаем в псевдоклассе hover ширину и высоту, отличную от оригинального размера.

Плавное перемещение

Здесь значения будем прописывать в псевдоклассе, используя свойство transform.

Написанное означает, что при наведении курсора на объект происходит его смещение по оси Х влево на 50 пикселей. Примерно так же происходит плавный переход к якорю-ссылке.

Плавный поворот

Это означает, что объект будет повернут на 180° по часовой стрелке

Вернемся к теме о браузерах. Opera, Mozilla, Chrome прекрасно поддерживают все эти новшества, но Internet Explorer как обычно живет своей жизнью и никуда не спешит. У него и так все хорошо. 🙂 То есть все, о чем я писал выше, он просто не понимает. Вот такие дела. Скачайте исходники и изучите код более подробно.

Плавное появление элементов интерфейса с помощью CSS-анимации прозрачности уже стало обычной практикой. Но такой блок даже с полной прозрачностью перекрывает всё, что окажется под ним.

Устанавливать свойство display: none нельзя потому, что тогда перестанет работать анимация . В этом случае поможет смена значения у свойства visibility . Его, на ряду с другими свойствами, указываем в transition.

PS: Разумеется, названия CSS3 свойств transition и transition-delay нужно указывать с браузерными префиксами.

Ещё заметки со схожей тематикой

Коментарии к заметке

@mista_k если я правильно понял задачу то тут поможет так же pointer-events: none; но кроссбраузерности будет конечно меньше.
— CyberAP (@CyberAP) January 7, 2014

Если увести курсор в каждом из примеров вниз, то исчезающий блок снова находит курсор и возвращается на место видимым. Стоило бы решить и эту проблему.

В стили добавил два правила:

Спасибо за пример. Он, разумеется, проще и надёжнее, но имеет совсем другое поведение.

Мерцание можно убрать с css -webkit-backface-visibility: hidden;

Данный пример использовал для открытия подпунктов меню. Нормально работает

В jQuery имеются различные методы, с помощью которых можно осуществить появление, исчезновение и переключение состояния видимости элементов. Отличаются одни методы от других только способом выполнения этих эффектов.

Методы jQuery с помощью которых можно управлять видимостью HTML-элементов на странице можно разделить на 3 основные группы:

Функции show (показать), hide (спрятать), toggle (переключить состояние из одного положение в другое) выполняют свои действия за счёт одновременного изменения 2 параметров: размеров (ширины и высоты) и прозрачности.
Функции fadeIn (отобразить), fadeOut (исчезнуть), fadeToggle (в зависимости от текущего состояния видимости, прячет или показывает элемент), fadeTo (изменяет состояние прозрачности элемента на заданное) производят свои действия за счёт изменения прозрачности элемента.
Функции slideDown (появление элемента), slideUp (исчезновение элемента), slideToggle (отображение или скрытие элемента в зависимости от того, в каком состоянии он сейчас находится) осуществляют своё действие за счёт изменения высоты элемента.

Варианты использования методов jQuery, предназначенных для скрытия и отображения элементов

В jQuery существует три варианта использования методов, предназначенных для появления или исчезнования элементов на странице.

Например, выполним плавное появление блока с идентификатором message с помощью метода show (длительность анимации 1 секунда), а затем скроем его (через 5 секунд после завершения анимации) посредством метода hide :

Например, отобразим блок (имеющий класс scrollup ) на странице после её прокрутки больше чем на 200px.

Например, напишем JavaScript код, который будет скрывать элемент при клике:

Виды параметров, которые можно указывать универсальному вызову метода .имяМетода(options) :

duration - параметр, определяющий длительность выполнения анимации в миллисекундах (число). По умолчанию: 400 мс. Кроме этого данный параметр может принимать следующие строковые значения: 'slow' (медленно), 'normal' (с обычной скоростью), 'fast' (быстро). Тип параметра duration : Number или String .
easing - параметр, содержащий строковое название функции (по умолчанию 'swing'), которая будет использоваться для задания скорости выполнения анимации в различных точках. В ядре библиотеки jQuery доступны только 2 функции easing : linear (с постоянной скоростью) и swing (скорость выполнения анимации в начале и конце меньше чем в середине, т.е. медленно -> быстро -> медленно). Тип параметра easing : String .
complete - параметр, содержащий функцию, которую необходимо вызвать после окончания выполнения анимации. Тип параметра complete : Function() .
step - параметр, указывающий функцию, которая будет вызываться перед выполнением каждого кадра анимации. Внутри функции кроме параметра содержащей номер текущего кадра, будет доступен ещё и объект анимации Tween . Это означает то, что вы можете изменить свойства анимации (т.е. свойства объекта Tween ) перед тем как они будут установлены. Тип параметра step : Function (Number now, Tween tween) .
queue - логический параметр с помощью которого можно указать необходимо ли помещать анимацию в очередь. По умолчанию анимация в jQuery выполняется последовательно друг за другом, т.е. новая анимация не начнёт выполняться пока не завершиться предыдущая. Если указать в качестве значения этого параметра значение false , то она начнёт выполняться немедленно, т.е. она не будет помещаться в очередь. Начиная с версии jQuery 1.7 данный параметр в качестве значения также может принимать строку (название очереди). В этом случае анимация не будет запускаться автоматически. Чтобы её запустить необходимо будет вызвать функцию dequeue и указать ей в качестве параметра имя очереди: .dequeue("queuename") . Тип параметра queue : Boolean или String .
specialEasing - параметр, который позволяет задать различным CSS свойствам разные функции easing. Задается указанный параметр в формате объекта: . Тип параметра specialEasing : PlainObject .
progress - параметр, содержащий функцию, которая будет вызываться после завершения каждого кадра анимации. Тип параметр progress : Function(Promise animation, Number progress, Number remainingMs) .
start - параметр, содержащий функцию, которая вызывается когда элемент начинает анимацию. Тип параметра start : Function (Promise animation) .
done - параметр, содержащий функцию, которая вызывается когда элемент завершил анимацию. Тип параметра done : Function (Promise animation, Boolean jumpedToEnd) .
fail - параметр, содержащий функцию, которая вызывается только тогда когда выполнение анимации не доходит до конца, т.е. завершается неудачей. Тип параметра: Function (Promise animation, Boolean jumpedToEnd) .
always - параметр, содержащий функцию, которая будет вызвана в момент завершения анимации или её остановки без окончания. Тип параметра always : Function (Promise animation, Boolean jumpedToEnd) .

Метод для изменения прозрачности fadeTo

Метод fadeTo отличается от методов show , hide , toggle , fadeIn , fadeOut , fadeToggle , slideDown , slideUp и slideToggle тем, что он предназначен не для скрытия или отображения элементов, а для изменения их прозрачности. Поэтому в отличие от этих методов у него есть дополнительный обязательный параметр opacity . Этот параметр задаёт степень непрозрачности, который необходимо установить выбранным элементам. Задаётся данный параметр посредством числа от 0 до 1. Число 0 – устанавливает полную (100%) прозрачность элемента, а 1 - полную его не прозрачность. Кроме этого методу fadeTo в отличие методов скрытия или отображения элементов необходимо обязательно также задавать длительность выполнения анимации.

Синтаксис использования метода fadeTo :

Внимание: Метод fadeTo в отличие от методов скрытия и отображения элементов не может принимать в качестве значения параметра объект.

Например, медленно изменим прозрачность текста (содержимое элемента p с классом lead ) при поднесении к нему курсора:

Читайте также: