Is there any way to animate an ellipsis with CSS animations?

css, css-animations

Solution

How about a slightly modified version of @xec's answer: http://codepen.io/thetallweeks/pen/yybGra

CSS Animation that uses `steps`. See MDN docs

.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: 40px;
  }
}

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

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

@xec's answer has more of a slide-in effect on the dots, while this allows the dots to appear instantly.

Problem

I'm trying to have an ellipsis animate, and was wondering if it was possible with CSS animations... So it might be like ``` Loading... Loading.. Loading. Loading... Loading.. ``` And basically just continue like that. Any ideas? Edit: like this: http://playground.magicrising.de/demo/ellipsis.html

Original source

Related problems