Почему анимация div движется вверх, а затем вправо заканчивается прыжком?

Я изучаю анимацию и пытаюсь заставить div (с input внутри) двигаться вверх, а затем вправо.

Переход вверх выглядит красиво и плавно. Однако переход вправо «прыгает» и заканчивается в более высокой точке (по отношению к предыдущему состоянию).

Что я делаю не так?

Код:

.container {
  top: 30%;
  position: absolute;
  animation: move 5s 1;
}

input {
  width: 100px;
  height: 10px;
}

@keyframes move {
  0% {
    top: 30%;
  }
  50% {
    top: 10%;
  }
  100% {
    top: 10%;
    left: 20%;
  }
}

<div class = "container">
  <input />
</div>

css css-animations keyframe

23.08.2018 23:42

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

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

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

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

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

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

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

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

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

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

Ответы 1

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

Проблема в том, что ваш left не имеет известного места начала, поэтому у него нет известной позиции, с которой можно начинать анимацию. Попробуйте следующее:

.container {
  top: 30%;
  left: 0%;
  position: absolute;
  animation: move 5s 1;
}

input {
  width: 100px;
  height: 10px;
}

@keyframes move {
  0% {
    top: 30%;
    left: 0%;
  }
  50% {
    top: 10%;
    left: 0%;
  }
  100% {
    top: 10%;
    left: 20%;
  }
}

<div class = "container">
  <input />
</div>

23.08.2018 23:49

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

CSS3-анимация не отображается в IE 11 и IE Edge

Как активировать анимацию после завершения другой анимации

Css animation - масштабирование элемента от его позиции к центру

Эффект наведения фона текста CSS странно ведет себя при наведении курсора мыши

NG-Bootstrap Navbar - анимированная анимация гамбургера

Колесо интерактивной графики HTML

Эмуляция переходов в Power Point с помощью Reveal.JS - пользовательское слайд-вход / выход

Анимировать пути SVG при наведении курсора во всех браузерах

Бесконечный сверху вниз чистый CSS-баннер Photo Banner, накладывается на первое изображение

Масштаб анимации CSS () не плавный

Почему анимация div движется вверх, а затем вправо заканчивается прыжком?

Ответы 1

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

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