¿Hay alguna forma de animar una elipsis con animaciones CSS?

92

Estoy tratando de animar una elipsis y me preguntaba si era posible con animaciones CSS ...

Entonces podría ser como

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

Y básicamente continúa así. ¿Algunas ideas?

Editar: así: http://playground.magicrising.de/demo/ellipsis.html

css css-animations Rey
fuente
3
Las animaciones no son transformaciones no son transiciones. Por favor, no confunda a los tres.
BoltClock
Vea mi respuesta a una pregunta similar: stackoverflow.com/a/24349758/282729
feklee

Respuestas:

88

¿Qué tal una versión ligeramente modificada de la respuesta de @ xec : http://codepen.io/thetallweeks/pen/yybGra

HTML

Una sola clase agregada al elemento:

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

CSS

Animación que usa steps. Ver documentos de 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;    
  }
}

La respuesta de @ xec tiene más un efecto de deslizamiento en los puntos, mientras que esto permite que los puntos aparezcan instantáneamente.

thetallweeks
fuente
1
Quiero decir que respondió esto como 3 años después, pero probablemente sea mejor.
Rey
3
@ xckpd7 sí, pero busqué en Google esto hoy y encontré esta respuesta. ¡SO no es solo para el OP, es un recurso para todos!
Matt Parrilla
1
@MattParrilla Soy el OP, y si notaron que cambié la respuesta, acepto a esta antes de hacer ese comentario.
Rey
10
Si está usando esto en un texto que está centrado o alineado a la derecha, le sugiero que agregue una inicial margin-right(¿o un relleno?) 20pxY lo anime 0pxsi no desea que su texto cambie durante la animación.
Kimball
1emen lugar de 20pxpuede funcionar mejor para el CSS en esta respuesta
Jeevan Takhar
56

Puede intentar usar el animation-delay propertyy el tiempo en cada carácter de puntos suspensivos. En este caso, he puesto cada carácter de puntos suspensivos en un <span class>para poder animarlos por separado.

Hice una demostración , que no es perfecta, pero muestra al menos lo que quiero decir :)

El código de mi ejemplo:

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;
    }
}
Christofer Vilander
fuente
Me gusta esta idea y la amplié un poco para mostrar "elipses en marcha": jsfiddle.net/toddwprice/cRLMw
Todd Price
No funcionó (?), Así que agregué display: inline; y luego los puntos. ¿Es así como debía funcionar? jsfiddle.net/cRLMw/3
Christofer Vilander
4
Lo siento @Christofer, olvidé guardar mi violín actualizado. Aquí está de nuevo: jsfiddle.net/toddwprice/cRLMw/8 Además, aquí hay un artículo que acabo de leer que tiene algunas animaciones CSS interesantes: tympanus.net/Tutorials/LoadingAnimations/index4.html
Todd Price
Usando Firefox no puedo arrastrarlo si simplemente hago clic y arrastro la imagen de una sola vez. Pero si primero hago clic en la imagen y luego hago clic y arrastro, no se me impide arrastrar.
Sam Rueby
2
Modifiqué
Adam Youngers
32

Incluso una solución más simple, ¡funciona bastante bien!

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

Acabo de editar el contenido con animación en lugar de ocultar algunos puntos ...

Demostración aquí: https://jsfiddle.net/f6vhway2/1/

Editar: Gracias a @BradCollins por señalar que contentno es una propiedad animable.

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

Así que esta es una solución única de WebKit / Blink / Electron. (Pero también funciona en las versiones actuales de FF)

CodeBrauer
fuente
Estaba viendo este hilo la semana pasada. ¡Buena respuesta simple!
r8n5n
1
+1 para animar content. Para obtener un ritmo de animación uniforme, debe usar steps(1)y definir un fotograma clave adicional. La función de paso dicta el número de pasos entre fotogramas clave y, dado que estamos especificando cada fotograma, solo queremos un paso entre ellos. codepen.io/anon/pen/VmEdXj
Jeff Camera
Si bien me encanta la elegancia de esta solución, cabe señalar que IE11 y (al momento de escribir este artículo) Firefox no admiten la animación de la contentpropiedad. (No sé sobre Edge.)
Brad Collins
@BradCollins ¡gracias por esto! ¡He editado mi respuesta!
CodeBrauer
15

La respuesta corta es "no realmente". Sin embargo, puede jugar con el ancho de animación y el desbordamiento ocultos, y tal vez obtener un efecto que sea "lo suficientemente cercano". (código a continuación adaptado solo para Firefox, agregue prefijos de proveedor según sea necesario).

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;
    }
}

demostración: http://jsfiddle.net/MDzsR/1/

editar

Parece que Chrome tiene problemas para animar el pseudoelemento. Una solución fácil es envolver la elipsis en su propio elemento. Consulte http://jsfiddle.net/MDzsR/4/

xec
fuente
No funciona en Chromium (sí, cambié el prefijo de proveedor a -webkitfrom -moz).
David dice reinstalar a Monica
@DavidThomas tiene razón: probado en Chrome ahora y parece que tiene problemas con el pseudo elemento. Puede envolver la elipsis en su propio elemento y animarlo en su lugar (también funcionaría en firefox) jsfiddle.net/MDzsR/4
xec
1
Una solución realmente agradable y perfecta para una aplicación de Firefox OS que estoy desarrollando. Lo modifiqué un poco: jsfiddle.net/feklee/x69uN
feklee
Aquí hay una versión mejorada que funciona en Chrome y funciona correctamente con elementos no alineados a la izquierda (no cambia el ancho). Además, muestra cada punto consecutivamente, sin este artefacto revelador deslizante: jsfiddle.net/fze2qxsv
Aayla Secura
@AaylaSecura La respuesta aceptada tiene una solución más limpia usando pasos en su lugar stackoverflow.com/a/28074607/833146
xec
3

Una adición tardía, pero encontré una manera de hacer esto que admite texto centrado.

<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
fuente
3

Puede animar clip(o mejor clip-pathsi no necesita el soporte de 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>
Expandir fragmento

Jakob E
fuente
1

Bueno, en realidad hay una forma pura de CSS de hacer esto.

Obtuve el ejemplo de CSS Tricks, pero también lo hice para que sea compatible con Internet Explorer (lo he probado en 10+).

Consulte la demostración: 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
fuente
Está agregando filtros de propiedad exclusiva de IE en fotogramas clave específicos de mozilla y específicos de webkit. ¿Cómo es esto una mejora con respecto a la solución ya aceptada? Incluso tiene el mismo problema (en los cuadros 4 y 5 solo son visibles los dos últimos puntos y el último, respectivamente, a diferencia de lo que se describe en la pregunta, que tiene 3 estados repetidos, no 5)
xec
La pregunta es sobre la creación de puntos de carga, y solo hay un ejemplo cercano, no obligatorio. Lo que he agregado son prefijos, para que IE pueda reconocerlo mejor y mostrarlo.
MRadev
3
-webkit-keyframessolo se aplicará a webkit, y dentro tienes un código solo de IE. Este código no hace más que desperdiciar espacio.
xec
0

Aquí está mi solución con CSS puro https://jsfiddle.net/pduc6jx5/1/ explicado: 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>
repositorio
fuente