Css анимация: слева и справа?

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

section {
    position: absolute;
    animation:linear infinite alternate;
    animation-name: run;
    animation-duration: 5s;
}     
  
@keyframes run {
        0% { left: 0;}
        50%{ left : 100%;}
        100%{ left: 0;}
    }

css css-animations

14.03.2019 17:38

Приемы 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 сценарий полностью изменился.

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

Ответы 3

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

Как насчет этого?

@keyframes run {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-100vw);
  }
  50.000001% {
    transform: translateX(100vw);
  }
}

.circle {
  width: 50px;
  height: 50px;
  background: red;
  border-radius: 50%;
  animation: linear infinite;
  animation-name: run;
  animation-duration: 5s;
}

<div class = "circle"></div>

14.03.2019 17:44

Вы также можете сделать это с двумя элементами, где один запускается на экране, а другой за кадром:

    body{
overflow:hidden;
}

div{
width:100px;
height:100px;
border:3px solid red;
  position:absolute;
 animation:move 2s linear infinite forwards;

}

div:first-of-type{
   top:calc(50% - 50px);
  left:calc(50% - 50px);
}
div:last-of-type{
   top:calc(50% - 50px);
  left:calc(150% - 50px);
}

@keyframes move{
  from{
    transform:translateX(0)
  }
  to{
    transform:translateX(-100vw)
  }
}

14.03.2019 17:51

Вы почти молодец, просто сделайте left:100% конечным состоянием и добавьте перевод в начале, который скроет ваш элемент в начальном состоянии:

.box {
  position: absolute;
  animation: linear infinite;
  animation-name: run;
  animation-duration: 2s;
  background:red;
  width:50px;
  height:50px;
}

@keyframes run {
  0% {
    left: 0;
    transform:translateX(-100%);
  }
  100% {
    left: 100%;
  }
}
body {
  margin:0;
  overflow:hidden;
}

<div class = "box"> </div>

14.03.2019 21:07

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

Реагировать активировать анимацию до смены реквизита

Как постепенно появляться и исчезать с Vue

Как анимировать выравнивание сверху вниз при наведении?

Как анимировать отдельные элементы списка?

Как я могу рисовать линии сетки на фоне веб-сайта после загрузки?

Более лаконичный способ написания кода ключевого кадра css/sass

Сохранение позиционирования на мобильном телефоне/планшете (Адаптивный)

Анимация CSS3 не работает с таблицами данных jQuery

Анимация Angular 7 вызывает проблему перекрытия z-индекса в браузерах webkit

Анимация ключевого кадра CSS приостанавливается в середине, а затем снова возобновляется?

Css анимация: слева и справа?

Ответы 3

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

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