Анимация появления элемента от его центра

@Pepeka · Регистрация: 15.01.2014

Студворк — интернет-сервис помощи студентам

Привет всем!

Как анимировать появление элемента DIV от центра? Раскрытие от центра влево и вправо (от вертикальной центральной линии)... Собственно что еще написать не знаю, весь вопрос вот он ) Ну и соответственно как изначально скрыть его, каким методом, чтобы эту анимацию потом начать?Тот же самый вопрос и насчет анимации от центра (горизонтальной центральной линии) вверх и вниз, вдруг мне или кому-то пригодится в будущем ))

Спасибо.

@mrtoxas · 03.08.2017, 10:03

Вы уже столько знаете про CSS анимации, пора бы уже выкладывать свои наработки и показывать что и где у вас не получается

@Pepeka · 04.08.2017, 07:01 **[ТС]**

Сообщение от mrtoxas

пора бы уже выкладывать свои наработки и показывать что и где у вас не получается

Я бы с удовольствием, уважаемый mrtoxas, но тут и выложить нечего... Пока оно вот прям в уме - вот он DIV произвольный, вот я его... скрыл, например "width:0"... и как его раскрыть анимированно от центра влево и вправо? Он раскроется слева направо, что не есть гуд, согласно моим потребностям.

То же самое и с вертикальным разворачиванием - если задам "height:0", то при последующем анимированном изменении высоты - DIV раскроется сверху вниз. Всё, тупик. Катастрофа... Шеф, всё пропало! )) Второй день размышляю, какой еще костыль прилепить - но ничего не приходит на ум....

Единственная, правда, мысль - "подвесить" такой DIV в ячейке тривиальной HTML таблицы, и у ячейки такой прописать вертикальное и горизонтальное центрирование. Но это суперкостыль прям - DIV в таблице, слишком, считаю, громоздко...

@mrtoxas · 04.08.2017, 09:12

Попробуйте использовать относительное или абсолютное позиционирование. И меняйте размеры при помощи top, right, bottom, left.

@Pepeka · 04.08.2017, 09:21 **[ТС]**

Сообщение от mrtoxas

И меняйте размеры при помощи top, right, bottom, left.

Хм... Но это же "команды" позиционирования, а не размера...

Вот такая мысль пришла под вторую кружку чая - внутренний DIV, основной, с контентом - постоянен в размере. И он внутри DIV с overflow:hidden, который изначально с нулевой шириной и такой же высотой как у первого DIV - ну то бишь оба DIV не видны при старте страницы.

И вот этот второй DIV анимационно, например при наведении мыши, меняет свои "padding-left" и "padding-right" - соответственно меняя ширину, и показывая содержимое - внутренний DIV. Запилю в кодэпен, покажу попозже...

Не по теме:

ЗЫ. А как красиво выделять операторы в тексте, чтобы не отдельным блоком, а в инлайне?

@mrtoxas · 04.08.2017, 10:39

Не по теме:

Тег [INLINE] в редакторе.

Пилите, может понятней будет задача.

Добавлено через 23 минуты

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    html, body {
      height: 100%;
    }
    .block {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 0;
      height: 10px;
      overflow: hidden;
      animation: width infinite linear;
    }
    
    .left {
      left: 50%;
      background-color: green;
      animation-duration: 2s;
    }
    .right {
      right: 50%;
      background-color: red;
      animation-duration: 5s;
    }
    @keyframes width {
      50% {
        width: 200px;
      }
    }
  </style>
</head>
 
<body>
  <div class="block left"></div>
  <div class="block right"></div>
</body>
 
</html>

@Pepeka · 04.08.2017, 10:47 **[ТС]**

Сообщение от mrtoxas

Тег [INLINE] в редакторе.

Эммм.. Спасибо, конеш... Но я имел ввиду выделение операторов и т.п. при написании сообщения на форуме данном. ВЫ мне еще "overflow:hidden" поправили в этом стиле как раз... )

Новые блоги и статьи Все статьи Все блоги /
Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .
Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.

@Pepeka 171 / 170 / 36 Регистрация: 15.01.2014 Сообщений: 1,010

	Анимация появления элемента от его центра 03.08.2017, 06:23. Показов 13139. Ответов 6 Метки анимация, влево, вправо, от центра (Все метки) Привет всем! Как анимировать появление элемента DIV от центра? Раскрытие от центра влево и вправо (от вертикальной центральной линии)... Собственно что еще написать не знаю, весь вопрос вот он ) Ну и соответственно как изначально скрыть его, каким методом, чтобы эту анимацию потом начать?Тот же самый вопрос и насчет анимации от центра (горизонтальной центральной линии) вверх и вниз, вдруг мне или кому-то пригодится в будущем )) Спасибо. 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	03.08.2017, 10:03
	Вы уже столько знаете про CSS анимации, пора бы уже выкладывать свои наработки и показывать что и где у вас не получается 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	04.08.2017, 09:12
	Попробуйте использовать относительное или абсолютное позиционирование. И меняйте размеры при помощи top, right, bottom, left. 0