How to Animate an Ellipsis with CSS Animations

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

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>

CSS Animation, ellipses starting from the end and repeating

.loading {
  font-size: 30px;
}

.loading:after {
  content: "...";
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  animation: ellipsis-dot 1s infinite .3s;
  animation-fill-mode: forwards;
  width: 1.25em;
}

@keyframes ellipsis-dot {
  25% {
    content: "";
  }
  50% {
    content: ".";
  }
  75% {
    content: "..";
  }
  100% {
    content: "...";
  }
}

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

Ellipsis with transition

The problem is that the width of the .card-dish__byline doesn't decrease in order for the text-overflow to take place. You should also add the text-overflow: ellipsis to the .card-dish__byline. Add this to your css:

.card-dish__byline {
  overflow: hidden;
  text-overflow: ellipsis;
  width: 280px;
  transition: width 1.5s;
}
.card-dish:hover .card-dish__byline {
  width: 230px;
}

Animate svg with @keyframes on an elipsis path

If you can compromise on browser compatibility, you should be able to do this in a much more semantic way using a motion path. It needs Chrome 64, Edge 79, Firefox 72, Opera 45, but has no Safari support.

The following example simplifies your code in several ways. First, I have rewritten the two circles as a single path, and additionally moved it so that the start and end of the path (the mid-point of the "infinity" sign) is at the origin of the coordinate system. This is because this path will be reused as the motion path - not by quotation, that is unfortunately impossible if you stay with CSS, but so you can just copy-and-paste the path commands.

To make my life a bit easier with the stroke-dashoffset animation, the path also gets the attribute (not CSS property!) pathLength="100". This is basically an arbitrary value that means: for all distance-along-a-path computaions, act as if 100 was the path length.

Second, I defined an offset-path with the same path commands used. offset-rotate is set to 0deg to avoid the phone rotating along the path tangent while it moves. The offset-distance increases from 0 to 100% during the animation.

#gesture {
  width: 300px;
  height: 300px;
}

#phone {
  fill: white;
  animation: phone-orbit 6s ease-in-out infinite;
  opacity: 0;
  offset-path: path("M0 0 A 30 30 0 0 1 60 0 A 30 30 0 0 1 0 0 A 30 30 0 0 0 -60 0 A 30 30 0 0 0 0 0");
  offset-rotate: 0deg;
  offset-distance: 0;
  will-change: transform, opacity;
}

#infinity {
  fill: none;
  stroke-width: 6.666;
  stroke: white;
  animation-fill-mode: forwards;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0;
  animation: infinity-fill 6s linear infinite;
}

@keyframes infinity-fill {
  0%, 25% {
    stroke-dashoffset: 100;
    opacity: 1;
  }
  25%, 100% {
    stroke-dashoffset: 0;
  }
  37.5% {
    opacity: 1;
  }
  49%, 100% {
    opacity: 0;
  }
}
@keyframes phone-orbit {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  45% {
    opacity: 1;
  }
  50% {
    offset-distance: 0%;
  }
  100% {
    opacity: 1;
    offset-distance: 100%;
  }
}

<body style="background-color: black;"> 
    <svg id="gesture" viewBox="0 0 300 300" xml:space="preserve">
      <g id="phone">
        <path  d="M212.1 23.1H90.2c-4.8 0-8.8 3.9-8.8 8.8v236.4c0 4.8 3.9 8.8 8.8 8.8h121.9c4.8 0 8.8-3.9 8.8-8.8V31.8c0-4.8-4-8.7-8.8-8.7zm0 8.5c.1 0 .2.1.2.2v28.4H90.2V31.6h121.9zM90 268.2l.2-200.6h122.1l-.2 200.8-122.1-.2z"/>
        <circle cx="151.1" cy="248.2" r="8.8"/>
        <path d="M142 49.5h18.3c2.3 0 4.1-1.8 4.1-4.1s-1.8-4.1-4.1-4.1H142c-2.3 0-4.1 1.8-4.1 4.1s1.8 4.1 4.1 4.1z"/>
      </g>
      <path id="infinity" transform="translate(150 150) scale(1.666)" d="M0 0 A 30 30 0 0 1 60 0 A 30 30 0 0 1 0 0 A 30 30 0 0 0 -60 0 A 30 30 0 0 0 0 0"  pathLength="100"/>
    </svg> 
</body>

Animating an SVG ellipse path with CSS translate

Move the animation to a parent element so it doesn't overwrite the ellipse's transform.

html, body, svg {  width: 100%;  height: 100%;}
ellipse {    transform: rotate(109deg);    fill: none;    stroke: #D9CC29;    stroke-width: 25.0519;    stroke-miterlimit: 10;    transform-origin: center;}
.halo_path {    animation: move_halo 2s infinite;    animation-direction: alternate-reverse;}
@keyframes move_halo {    0% {        transform: translate(0, 5px);    }    100% {        transform: translate(0, -10px);    }}

<svg viewBox="0 0 1000 400">    <g class="halo_path" >    <ellipse cx="449" cy="166.5" rx="63" ry="234.3" />    </g></svg>

how to make transition ellipse in css

You cannot achieve this with only a simple transition effect. You will need to use CSS keyframe animations to achieve a border radius only on the width transition:

.sidenav {  height: 100%;  width: 100px;  position: fixed;  z-index: 2;  top: 0;  left: 0;  background-color: #fff;  overflow: hidden;  padding-top: 20px;  transition: 0.8s;  opacity: 0.8;  box-shadow: 0px 20px 50px black;  border-radius: 0;  background: black;}
.sidenav:hover {  width: 215px;  overflow: hidden;  animation-name: roundborder;  animation-duration: 1s;  animation-iteration-count: 1;}
@keyframes roundborder {    0%   { border-radius: 0; }    50%  { border-radius: 0 50% 50% 0; }    100% { border-radius: 0; }}

<div class="sidenav"></div>

Punctuation loading animation, javascript?

The trick to making a string of dots is to make a sparse Array and then join all the elements with the desired character.

var count = 0;
setInterval(function(){
    count++;
    var dots = new Array(count % 10).join('.');
    document.getElementById('loadingtext').innerHTML = "Waiting for your input." + dots;
  }, 1000);

Here is a Live demo.