Css анимация раскрытия блока

 
Пункт 1
 
Пункт 2
 
Пункт 3
 
Пункт 4
 
Пункт 5
 

 
Пункт 1
 
Пункт 2
 
Пункт 3
 
Пункт 4
 
Пункт 5
 

 
Пункт 1
 
Пункт 2
 
Пункт 3
 
Пункт 4
 
Пункт 5
 

 
Пункт 1
 
Пункт 2
 
Пункт 3
 
Пункт 4
 
Пункт 5
 

 
Пункт 1
 
Пункт 2
 
Пункт 3
 
Пункт 4
 
Пункт 5
 

header>div header>div:nth-child(1) header>div:nth-child(2) header>div:nth-child(3) header>div:nth-child(4) header>div:nth-child(5) @keyframes ani < 0% 15% 30% 45% 60% 75% 85% 100% >

 
Пункт 1
 
Пункт 2
 
Пункт 3
 
Пункт 4
 
Пункт 5
 

window.onload = () => document.querySelector('header').classList.remove('hidden');

 
Пункт 1
 
Пункт 2
 
Пункт 3
 
Пункт 4
 
Пункт 5
 

  
День рождения: 03.03.2003
 
Город: Санкт-Петербург
 
 
Родной город: Москва
 
Языки: Русский, Українська, English
 
Семейное положение: Все сложно
 
Пол: Мужской
 
Телефон: +00000000000
 
 Показать информацию полностью Скрыть дополнительную информацию 

.box < position: relative; padding: 15px; border-radius: 40px; background: rgba(0, 0, 0, 0.3); margin: 0 0 10px 0; transition: background 0.1s; >.profile-information < padding: 20px; >.information < margin: 0 0 10px 0; >.statuse-block < display: flex; justify-content: space-between; >.p-status < display: inline-block; float: left; >#status < width: 100%; padding: 0 5px; color: #FFF; background: rgba(0, 0, 0, 0); border: 0; outline: 0; cursor: pointer; >#status:focus < border-bottom: 1px solid #FFF; >.big-information < margin: 0 0 10px 0; >#open-information < width: 100%; color: skyblue; background: rgba(0, 0, 0, 0); border: 0; outline: 0; cursor: pointer; transition: 0.3s color; >#close-information < width: 100%; color: skyblue; background: rgba(0, 0, 0, 0); border: 0; outline: 0; cursor: pointer; transition: 0.3s color; >#open-information:hover < color: #FFF; >#close-information:hover

У блоки с ИД «c» стиль Display none, можно ли сделать для блока с ИД «a» плавную height при раскрытии блока с ИД «c» из display none в block ?

Источник

Как сделать плавное появление блока CSS свойствами?

Существует несколько способов. Зная определённые принципы работы с CSS3, можно реализовать плавное появление блока CSS свойствами, тем самым воплотив в жизнь массу креативных идей для сайта. Как вариант – сделать плавное появление элемента, возникающее после наведения указателя мышки на какой-либо элемент на странице. Другой пример – демонстрация элемента спустя заданный временной промежуток без использования скриптов.

Сначала давайте рассмотрим вариант плавного появления блока CSS с помощью свойств при наведении. Нам предстоит сделать следующие шаги.

1. Создаем два блока: один будет видимым и будет плавно возникать на странице, другой – будет скрытым.
   
2. Заполним стили оформления.
   
   Для скрытого блока указываем полную прозрачность, а также прописываем для него скорость перехода между состояниями элемента. Для этого нам нужны теги opacity:0 и transition: 2 s. Обратите внимание, скорость перехода состояния элемента мы задали 2 секунды.
3. Далее – самый важный шаг. Используя селектор .on-hover:hover+ .hidden-block, мы делаем так, чтобы при наведении на элемент с классом .on-hover будут применены свойства для элемента .hidden-block. Элемент становится видимым, так как мы изменяем и прозрачность.
   

Важно: блок .hidden-block не располагается внутри .on-hover. Поэтому придётся использовать hover с +. Скрытый элемент в вашем случаи располагается внутри элемента, на который нужно навести курсор? Советуем обратиться к селектору .on-hover:hover+ .hidden-block.

Теперь перейдём к плавному появление блока с помощью CSS с временной задержкой через использование правила @keyframes.

1. Создайте прозрачный по умолчанию блок.
   
2. Пропишите свойства оформления элемента, прозрачность и скорость перехода.
   
   Задайте свойство animation, в котором пропишите название анимации (show), её скорость (2 секунды) и число повторений (1). Указывая свойство animation-fill-mode со значением forwards, вы не допустите того, чтобы после выполнения анимации элемент принял первоначальное состояние. Он сохранит новый вид.
   Также зададим дополнительное свойство, которое отсрочит запуск анимации на 2 секунды (animation-delay).
3. Через правило @keyframes, задаём последовательность, с которой будет появляться блок.

Думаем, после изучения нашей пошаговой инструкции, у вас не будет трудностей с настройкой анимации плавного появления блока CSS. Но если вдруг возникли дополнительные вопросы или комментарии, вы можете написать нам с помощью формы обратной связи. Оставляйте свои сообщения – будем рады ответить на них! Или заказывайте разработку сайта под ключ у нас!

Еще ответы по теме:

Источник