it-swarm.com.ru

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

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

Так что это может быть как

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

И в основном просто так продолжать. Есть идеи?

Правка: как это: http://playground.magicrising.de/demo/Ellipsis.html

75
Rey

Как насчет слегка измененной версии @ xec's answer : 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 имеет больше влияния на точки, в то время как это позволяет точкам появляться мгновенно.

69
thetallweeks

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

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

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

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;
    }
}
52
Christofer Vilander

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

<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/


Edit: Спасибо @BradCollins за указание на то, что content не является анимируемым свойством.

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

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

24
CodeBrauer

Краткий ответ "не совсем". Тем не менее, вы можете поиграть с анимацией ширины и скрытого переполнения, и, возможно, получить эффект, который «достаточно близок». (приведенный ниже код предназначен только для 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/

15
xec

Ну, на самом деле есть чистый способ 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;
}
1
MRadev

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

<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: '...';
    }
}
0
anon-e-mouse