Чи є спосіб анімувати еліпсис за допомогою анімації CSS?

93

Я намагаюся створити анімацію багатоточия, і мені було цікаво, чи можливо це з анімацією 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 має більший ефект вставки на крапки, хоча це дозволяє крапкам з’являтися миттєво.

— останні тиждень
джерело
1
Я маю на увазі, що ти відповів на це як через 3 роки, але це, мабуть, краще.
— Рей
3
@ xckpd7 так, але я погуглив це сьогодні і просто знайшов цю відповідь. ТАК не лише для ОП, це ресурс для всіх!
— Метт Паррілла,
1
@MattParrilla Я ОП, і якщо ви помітили, я змінив відповідь, яку приймаю, на цю, перш ніж зробити цей коментар.
— Рей
10
Якщо ви використовуєте це для тексту, який відцентрований або вирівняний праворуч, я б запропонував додати ініціал margin-right(або відступ?) 20pxТа анімувати його, 0pxякщо ви не хочете, щоб ваш текст зміщувався під час анімації.
— Кімбол,
1emзамість цього 20pxможе відповісти краще для CSS
— Jeevan Takhar
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
Я трохи підправив
— Адам
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
1
+1 за анімацію content. Щоб отримати рівномірний ритм анімації, слід використовувати steps(1)та визначити один додатковий ключовий кадр. Функція кроку диктує кількість кроків між ключовими кадрами, і оскільки ми вказуємо кожен кадр, нам просто потрібен один крок між ними. codepen.io/anon/pen/VmEdXj
— Джефф Камера
Хоча я люблю елегантність цього рішення, слід зазначити, що IE11 та (на момент написання статті) Firefox не підтримують анімацію contentвластивості. (Не знаю про Edge.)
— Бред Коллінз,
@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/

редагувати

Здається, у chrome є проблеми з анімацією псевдоелемента. Легким виправленням є обгортання еліпсису власним елементом. Перевірте http://jsfiddle.net/MDzsR/4/

— xec
джерело
Не працює в Chromium (так, я змінив префікс постачальника на -webkitз -moz).
— Девід каже, відновити Моніку
@DavidThomas ти маєш рацію - протестовано зараз у chrome, і, схоже, у нього проблеми з псевдоелементом. Ви можете обернути еліпсис у своєму власному елементі та анімувати, що натомість (це буде працювати і у Firefox) jsfiddle.net/MDzsR/4
— xec
1
Дійсно приємне рішення та ідеально підходить для програми Firefox OS, яку я розробляю. Трохи змінив
— feklee
Ось покращена версія, яка працює в Chrome, а також правильно працює з елементами, не вирівняними за лівим краєм (не змінює ширину). Крім того, вона показує кожну крапку послідовно, без цього ковзного виявляючого артефакту: jsfiddle.net/fze2qxsv
— Секура
@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: '...';
    }
}
— anon-e-mouse
джерело
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;
}
— М.Радев
джерело
Ви додаєте власні фільтри лише для 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.