Есть ли способ анимировать многоточие с помощью CSS-анимации?

92

Я пытаюсь анимировать многоточие, и мне было интересно, возможно ли это с помощью CSS-анимации ...

Так могло бы быть как

Loading...
Loading..
Loading.
Loading...
Loading..

И в основном просто продолжайте так. Любые идеи?

Изменить: вот так: http://playground.magicrising.de/demo/ellipsis.html

css  css-animations 
— Рей
источник
3
Анимации - это не преобразования, это не переходы. Пожалуйста, не путайте их троих.
— BoltClock
См. Мой ответ на аналогичный вопрос: stackoverflow.com/a/24349758/282729
— feklee

Ответы:

88

Как насчет слегка измененной версии ответа @xec : http://codepen.io/thetallweeks/pen/yybGra

HTML

К элементу добавлен единственный класс:

<div class="loading">Loading</div>

CSS

Анимация, использующая steps. См. Документацию MDN

.loading:after {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  -webkit-animation: ellipsis steps(4,end) 900ms infinite;      
  animation: ellipsis steps(4,end) 900ms infinite;
  content: "\2026"; /* ascii code for the ellipsis character */
  width: 0px;
}

@keyframes ellipsis {
  to {
    width: 20px;    
  }
}

@-webkit-keyframes ellipsis {
  to {
    width: 20px;    
  }
}

Ответ @ xec имеет больший эффект скольжения на точки, в то время как это позволяет точкам появляться мгновенно.

— thetallweeks
источник
1
Я имею в виду, что вы ответили на этот вопрос через 3 года, но это, вероятно, лучше.
— Рей
3
@ xckpd7 да, но я погуглил это сегодня и только что нашел этот ответ. ТАК не только для ОП, это ресурс для всех!
— Мэтт Паррилья
1
@MattParrilla Я ОП, и если вы заметили, я изменил ответ, который принимаю, на этот до того, как сделал этот комментарий.
— Rey
10
Если вы используете это для текста, который центрирован или выровнен по правому краю, я бы предложил добавить начальное margin-right(или отступ?) 20pxИ анимировать его, 0pxесли вы не хотите, чтобы ваш текст смещался во время анимации.
— Kimball
1emвместо 20pxможет работать лучше для CSS в этом ответе
— Дживан Тахар,
56

Вы можете попробовать использовать animation-delay propertyи время для каждого символа многоточия. В этом случае я поместил каждый символ многоточия в, <span class>чтобы я мог анимировать их отдельно.

Я сделал демо , которое не идеально, но, по крайней мере, показывает, что я имею в виду :)

Код из моего примера:

HTML

Loading<span class="one">.</span><span class="two">.</span><span class="three">.</span>​

CSS

.one {
    opacity: 0;
    -webkit-animation: dot 1.3s infinite;
    -webkit-animation-delay: 0.0s;
    animation: dot 1.3s infinite;
    animation-delay: 0.0s;
}

.two {
    opacity: 0;
    -webkit-animation: dot 1.3s infinite;
    -webkit-animation-delay: 0.2s;
    animation: dot 1.3s infinite;
    animation-delay: 0.2s;
}

.three {
    opacity: 0;
    -webkit-animation: dot 1.3s infinite;
    -webkit-animation-delay: 0.3s;
    animation: dot 1.3s infinite;
    animation-delay: 0.3s;
}

@-webkit-keyframes dot {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes dot {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
— Кристофер Виландер
источник
Мне нравится эта идея, и я немного расширил ее, чтобы показать «маршевые элипсы»: jsfiddle.net/toddwprice/cRLMw
— Тодд Прайс
Это не сработало (?), Поэтому я добавил display: inline; а затем точки. Так оно и должно было работать? jsfiddle.net/cRLMw/3
— Кристофер Виландер
4
Извините, @Christofer - забыл сохранить обновленную скрипку. И снова: jsfiddle.net/toddwprice/cRLMw/8 Кроме того, вот статья, которую я только что прочитал, с интересными CSS-анимациями: tympanus.net/Tutorials/LoadingAnimations/index4.html
— Тодд Прайс
Используя Firefox, я не могу перетащить его, просто щелкнув и перетащив изображение за один раз. Но если я сначала нажимаю на изображение, а затем щелкаю и перетаскиваю, мне не мешает перетаскивать.
— Сэм Руби
2
Я немного изменил HTML и CSS, чтобы использовать теги <i> ... jsfiddle.net/DkcD4/77
— Адам Янгерс
32

Даже более простое решение работает очень хорошо!

<style>
    .loading:after {
      display: inline-block;
      animation: dotty steps(1,end) 1s infinite;
      content: '';
    }

    @keyframes dotty {
        0%   { content: ''; }
        25%  { content: '.'; }
        50%  { content: '..'; }
        75%  { content: '...'; }
        100% { content: ''; }
    }
</style>
<div class="loading">Loading</div>

Просто отредактировал контент с анимацией, вместо того, чтобы скрывать некоторые точки ...

Демо здесь: https://jsfiddle.net/f6vhway2/1/

Изменить: Спасибо @BradCollins за указание, что contentэто не анимируемое свойство.

https://www.w3.org/TR/css3-transitions/#animatable-css

Итак, это решение только для WebKit / Blink / Electron. (Но он работает и в текущих версиях FF)

— CodeBrauer
источник
Я просматривал эту ветку только на прошлой неделе. Хороший простой ответ!
— r8n5n 06
1
+1 за анимацию content. Чтобы получить ровный ритм анимации, вы должны использовать steps(1)и определить один дополнительный ключевой кадр. Функция step определяет количество шагов между ключевыми кадрами, и, поскольку мы указываем каждый кадр, нам нужен только один шаг между ними. codepen.io/anon/pen/VmEdXj
— Джефф Камер
Хотя мне нравится элегантность этого решения, следует отметить, что IE11 и (на момент написания) Firefox не поддерживают анимацию contentсвойства. (Не знаю насчет Эджа.)
— Брэд Коллинз
@BradCollins спасибо за это! Я отредактировал свой ответ!
— CodeBrauer
15

Короткий ответ - «не совсем». Однако вы можете поиграть с анимацией ширины и скрытого переполнения и, возможно, получить эффект, который "достаточно близок". (приведенный ниже код предназначен только для firefox, при необходимости добавьте префиксы поставщиков).

html

<div class="loading">Loading</div>

css

.loading:after {
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    -moz-animation: ellipsis 2s infinite;
    content: "\2026"; /* ascii code for the ellipsis character */
}
@-moz-keyframes ellipsis {
    from {
        width: 2px;
    }
    to {
        width: 15px;
    }
}

демо: http://jsfiddle.net/MDzsR/1/

редактировать

Похоже, что у хрома есть проблемы с анимацией псевдоэлемента. Простое решение - заключить многоточие в отдельный элемент. Посетите http://jsfiddle.net/MDzsR/4/

— xec
источник
Не работает в Chromium (да, я изменил префикс поставщика на -webkitfrom -moz).
— Дэвид требует восстановить Монику на работе
@DavidThomas, вы правы - сейчас протестировано в Chrome, и похоже, что у него есть проблемы с псевдоэлементом. Вы можете обернуть многоточие в отдельный элемент и анимировать его вместо этого (будет работать и в firefox) jsfiddle.net/MDzsR/4
— xec
1
Действительно хорошее решение, идеально подходящее для разрабатываемого мной приложения Firefox OS. Немного подправили
— feklee
Вот улучшенная версия, которая работает в Chrome, а также правильно работает с элементами, не выровненными по левому краю (не меняет ширину). Кроме того, каждая точка отображается последовательно, без этого скользящего обнаруживающего артефакта: jsfiddle.net/fze2qxsv
— Secura
@AaylaSecura В принятом ответе есть более чистое решение с использованием шагов stackoverflow.com/a/28074607/833146
— xec
3

Позднее добавление, но я нашел способ сделать это, который поддерживает центрированный текст.

<element>:after {
    content: '\00a0\00a0\00a0';
    animation: progress-ellipsis 5s infinite;
}

@keyframes progress-ellipsis {
    0% {
        content: '\00a0\00a0\00a0';
    }
    30% {
        content: '.\00a0\00a0';
    }
    60% {
        content: '..\00a0';
    }
    90% {
        content: '...';
    }
}
— анонимная электронная мышь
источник
3

Вы можете анимировать clip(или лучше, clip-pathесли вам не нужна поддержка IE) 

div {
  position: relative;
  display: inline-block;
  font-size: 1.4rem;
}

div:after {
  position: absolute;
  margin-left: .1rem;
  content: ' ...';
  display: inline-block;
  animation: loading steps(4) 2s infinite;
  clip: rect(auto, 0px, auto, auto);
}

@keyframes loading {
  to {
    clip: rect(auto, 20px, auto, auto);
  }
}
<div>Loading</div>
Развернуть фрагмент

— Якоб Э
источник
1

На самом деле есть способ сделать это на чистом CSS.

Я получил пример от CSS Tricks, но также сделал так, чтобы он поддерживался в Internet Explorer (я тестировал его в 10+).

Проверьте демонстрацию: http://jsfiddle.net/Roobyx/AT6v6/2/

HTML:

<h4 id="searching-ellipsis"> Searching
    <span>.</span>
    <span>.</span>
    <span>.</span>
</h4>

CSS:

@-webkit-keyframes opacity {
  0% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
  }
  100% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
  }
}

@-moz-keyframes opacity {
  0% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
  }

  100% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
  }
}

@-webkit-keyframes opacity {
  0% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
  }
  100% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
  }
}

@-moz-keyframes opacity {
  0% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
  }
  100% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
  }
}

@-o-keyframes opacity {
  0% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
  }
  100% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
  }
}

@keyframes opacity {
  0% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
  }
  100% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
  }
}
#searching-ellipsis span {
  -webkit-animation-name: opacity;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: opacity;
  -moz-animation-duration: 1s;
  -moz-animation-iteration-count: infinite;
  -ms-animation-name: opacity;
  -ms-animation-duration: 1s;
  -ms-animation-iteration-count: infinite;
}
#searching-ellipsis span:nth-child(2) {
  -webkit-animation-delay: 100ms;
  -moz-animation-delay: 100ms;
  -ms-animation-delay: 100ms;
  -o-animation-delay: 100ms;
  animation-delay: 100ms;
}
#searching-ellipsis span:nth-child(3) {
  -webkit-animation-delay: 300ms;
  -moz-animation-delay: 300ms;
  -ms-animation-delay: 300ms;
  -o-animation-delay: 300ms;
  animation-delay: 300ms;
}
— MRadev
источник
Вы добавляете проприетарные фильтры только для IE в ключевые кадры, специфичные для Mozilla и Webkit. Чем это лучше уже принятого решения? У него даже такая же проблема (в кадрах 4 и 5 видны только две последние и самая последняя точки соответственно, в отличие от того, что указано в вопросе, который имеет 3 повторяющихся состояния, а не 5)
— xec
Речь идет о создании точек загрузки, и есть только пример, не обязательный. Я добавил префиксы, чтобы IE мог лучше распознать и отобразить.
— MRadev
3
-webkit-keyframesбудет применяться только к webkit, а внутри у вас есть код только для IE. Этот код ничего не делает, кроме как тратить место.
— xec
0

Вот мое решение с чистым css https://jsfiddle.net/pduc6jx5/1/ объяснил: https://medium.com/@lastseeds/create-text-ellipsis-animation-with-pure-css-7f61acee69cc

scss



.dot1 {
 animation: visibility 3s linear infinite;
}

@keyframes visibility {
 0% {
 opacity: 1;
 }
 65% {
 opacity: 1;
 }
 66% {
 opacity: 0;
 }
 100% {
 opacity: 0;
 }
}

.dot2 {
 animation: visibility2 3s linear infinite;
}

@keyframes visibility2 {
 0% {
  opacity: 0;
 }
 21% {
  opacity: 0;
 }
 22% {
  opacity: 1;
 }
 65% {
  opacity: 1;
 }
 66% {
  opacity: 0;
 }
 100% {
  opacity: 0;
 }
}

.dot3 {
 animation: visibility3 3s linear infinite;
}

@keyframes visibility3 {
 0% {
  opacity: 0;
 }
 43% {
  opacity: 0;
 }
 44% {
  opacity: 1;
 }
 65% {
  opacity: 1;
 }
 66% {
  opacity: 0;
 }
 100% {
  opacity: 0;
 }
}

html

Loading <span class="dot dot1">.</span><span class="dot dot2">.</span><span class="dot dot3">.</span>
— репо
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.