Переход HTML-элемента из центра в CSS3

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

.toggle {
  position: absolute;
  width: 400px;
  height: 200px;
  background: #ccc;
}

.left-border {
  position: absolute;
  top: 50px;
  left: 10px;
  width: 20px;
  height: 60px;
  border-radius: 200px;
  background-color: #ff0000;
  animation: height 2s;
}

@-webkit-keyframes height {
  from {
    height: 60px;
  }
  to {
    height: 10px;
  }
}

<div class = "toggle">
  <div class = "left-border"></div>
</div>

Вот JSFIDDLE

Что вы имеете в виду, когда хотите, чтобы это происходило из центра? Не могли бы вы дать дополнительные разъяснения?

— 14.09.2018 20:04

html css css-transitions css-animations

14.09.2018 19:17

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

137

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Ответ принят как подходящий

Ну вот. Я использую анимацию top вместо height. Красный переключатель теперь также нуждается в «контейнере», поэтому я просто использовал тот, который у вас был. При изменении размеров красного переключателя измените внешнюю оболочку, а не элемент переключения (он будет соответствовать любому контейнеру, как по ширине, так и по высоте).

https://jsfiddle.net/j2refncs/7/

.toggle {
  width: 20px;
  height: 40px;
  background: #ccc;
  position: relative;

  .left-border {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 200px;
    background-color: #ff0000;
    animation: height 2s;
  }
}

@-webkit-keyframes height {
  from {
    top: 0;
  }
  to {
    top: 30px;
  }
}

14.09.2018 19:21

Можно использовать transform

from {
}
to {
  transform: scaleY(0.1666);
}

0.1666 происходит от 10px / 60px

14.09.2018 19:36

Вы можете анимировать top с помощью height, чтобы изменение высоты отображалось из центра:

.toggle {
  position: relative;
  width: 400px;
  height: 200px;
  background: #ccc;
}

.left-border {
  position: absolute;
  top: 25px;
  left: 10px;
  width: 20px;
  height: 60px;
  border-radius: 200px;
  background-color: #ff0000;
  animation: height 2s forwards;
}

@keyframes height {
  from {
    top: 25px;
    height: 60px;
  }
  to {
    top: 50px;
    height: 10px;
  }
}

<div class = "toggle">
  <div class = "left-border"></div>
</div>

Вы также можете использовать transform: scaleY() в анимации. По умолчанию преобразовать происхождение - это центр.

.toggle {
  position: relative;
  width: 400px;
  height: 200px;
  background: #ccc;
}

.left-border {
  position: absolute;
  top: 25px;
  left: 10px;
  width: 20px;
  height: 60px;
  border-radius: 200px;
  background-color: #ff0000;
  animation: height 2s forwards;
}

@keyframes height {
  from {
    transform: scaleY(1);
  }
  to {
    transform: scaleY(0.167);
  }
}

<div class = "toggle">
  <div class = "left-border"></div>
</div>

14.09.2018 19:37

Просто добавьте top: 75px в ключевой кадр, поскольку изменение в height - 50px. Вы хотите уменьшить height на 25 пикселей или наполовину с обеих сторон, Топ и Нижний, чтобы прийти к желаемому 10px. Итак, 50 пикселей / 2 + top: 50px = top: 75px:

.toggle {
  position: absolute;
  width: 400px;
  height: 200px;
  background: #ccc;
}

.left-border {
  position: absolute;
  top: 50px; /* starting position from the top */
  left: 10px;
  width: 20px;
  height: 60px;
  border-radius: 200px;
  background-color: #f00;
  animation: height 2s;
}

@-webkit-keyframes height {
  to {height: 10px; top: 75px} /* + ending position from the top */
}

<div class = "toggle">
  <div class = "left-border"></div>
</div>

14.09.2018 20:01

Другие вопросы по теме

Стиль CSS внутри стиля - может ли кто-нибудь мне это объяснить?

Как я могу настроить размер шрифта текста всплывающей подсказки начальной загрузки?

Центрировать метку по вертикали внутри элемента рассчитанной высоты

Как преобразовать это в стилизованные компоненты и как вложить классы

Позиционирование кнопок Navbar с Bootstrap 4 и Flexbox не работает?

Выровнять содержимое по центру с помощью flexbox

Как (правильно) повторно использовать SVG с linearGradient несколько раз на одной странице

CSS - данные таблицы не попадают под фиксированный заголовок таблицы

Поместите все элементы навигации в строку

Добавить фильтр размытия CSS для фона, установленного с помощью JavaScript

Переход HTML-элемента из центра в CSS3

Ответы 4

Другие вопросы по теме

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