Анимированные точки с помощью CSS, заставляющие их двигаться вечно

Кажется, я не могу заставить эту анимацию двигаться вечно, не добавляя больше точек в промежуток. Я бы хотел, чтобы количество точек не зависело от класса «загрузка точек», так как добавление большего количества точек увеличивает продолжительность, но это боль. Возможно ли иметь одну точку, но оживить ее навсегда? Мне нравится возможность менять скорость и направление.

Вот КодПен

* {
  box-sizing: border-box;
}

body {
  padding: 50px;
  background: white;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px 20px 0px 20px;
}

.loading-container {
  overflow: hidden;
  float: left;
  width: 200px;
}

.loading-dots {
  display: inline-block;
  animation-name: loading-dots;
  animation-duration: 5s;
  animation-timing-function: linear;
  font-size: 50px;
  position: relative;
  top: -27px;
  color: rgba(blue, 1);
  font-family: sans-serif;
  white-space: no-wrap;
}

.loading-title {
  overflow: display;
  position: relative;
  font-size: 30px;
  top: 10px;
  margin-right: 10px;
  font-family: monospace;
  color: rgba(white, 1);
  float: left;
}

@keyframes loading-dots {
  0% {
    transform: translateX(-600px);
  }
  100% {
    transform: translateX(0px);
  }
}

<div class = "container">
  <span class = "loading-title"></span>
  <div class = "loading-container">
    <span class = "loading-dots">.................
      </span>
  </div>
</div>

css css-animations

07.04.2019 20:46

Приемы 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 915

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

Ответы 2

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

Вы можете сделать это с помощью простого фона, где будет легко контролировать анимацию, а также размер ваших точек:

.dots {
  height:5px; /*to control the overall height*/
  width:200px; /*to control the overall width*/
  margin:50px;
  background-image:
    repeating-linear-gradient(to right,
     transparent,transparent 5px, /*5px of transparent*/
     blue 5px,blue 10px); /*then 5px of blue */
  background-size:200% 100%;
  animation:change 3s linear infinite;
}

@keyframes change{
  to {
    background-position:right;
  }
}

<div class = "dots"></div>

Чтобы изменить направление, вы просто меняете позицию:

.dots {
  height:5px;
  width:200px;
  margin:50px;
  background-image:
    repeating-linear-gradient(to right,
     transparent,transparent 5px,
     blue 5px,blue 10px);
  background-size:200% 100%;
  background-position:right;
  animation:change 3s linear infinite;
}

@keyframes change{
  to {
    background-position:left;
  }
}

<div class = "dots"></div>

Вы можете проверить это для получения более подробной информации о различных используемых значениях: Использование процентных значений с фоновым положением на линейном градиенте

Еще одна идея с использованием анимации при трансформации:

.dots {
  height:5px;
  width:200px;
  margin:50px;
  position:relative;
  overflow:hidden;
}
.dots::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:-100%;
  bottom:0;
  background-image:
    repeating-linear-gradient(to right,
     transparent,transparent 5px,
     blue 5px,blue 10px);
  animation:change 3s linear infinite;

}

@keyframes change{
  to {
    transform:translateX(-50%);
  }
}

<div class = "dots"></div>

Изменение направления:

.dots {
  height:5px;
  width:200px;
  margin:50px;
  position:relative;
  overflow:hidden;
}
.dots::before {
  content:"";
  position:absolute;
  top:0;
  left:-100%;
  right:0;
  bottom:0;
  background-image:
    repeating-linear-gradient(to right,
     transparent,transparent 5px,
     blue 5px,blue 10px);
  animation:change 3s linear infinite;

}

@keyframes change{
  to {
    transform:translateX(50%);
  }
}

<div class = "dots"></div>

07.04.2019 21:07

Уменьшите поле отрицательного пикселя. -600px довольно избыточно для 16 точек.

@keyframes loading-dots {
  0% {
    transform: translateX(-50px);
  }
  100% {
    transform: translateX(0px);
  }
}

07.04.2019 21:09

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

Как вы переходите между display:none и display:block?

Как плавно сделать анимацию CSS без разрыва в конце

Воспроизвести анимацию ключевого кадра при первом нажатии и воспроизвести в обратном порядке при втором

CSS3 Animation — Плавная бесконечная анимация

Анимация Angular 7/CSS: расширение поля формы в фокусе на указанную величину?

Абсолютно позиционированный элемент перемещается после завершения анимации

Как сделать плавную кривую/поворот в анимации CSS

Анимация панели аккордеона Angular bootstrap

Как отключить анимацию класса коробки

Слайдер html css3 - Как рассчитать процент или время выполнения нового созданного слайдера ключевого кадра в коде?

Анимированные точки с помощью CSS, заставляющие их двигаться вечно

Ответы 2

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

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