Apakah ada cara untuk menganimasikan elipsis dengan animasi CSS?

92

Saya mencoba membuat elipsis beranimasi, dan bertanya-tanya apakah itu mungkin dengan animasi CSS ...

Jadi mungkin seperti itu

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

Dan pada dasarnya teruskan seperti itu. Ada ide?

Edit: seperti ini: http://playground.magicrising.de/demo/ellipsis.html

css css-animations Rey
sumber
3
Animasi bukanlah transformasi bukan transisi. Tolong jangan campur mereka bertiga.
BoltClock
Lihat jawaban saya untuk pertanyaan serupa: stackoverflow.com/a/24349758/282729
feklee

Jawaban:

88

Bagaimana dengan versi jawaban @ xec yang sedikit dimodifikasi : http://codepen.io/thetallweeks/pen/yybGra

HTML

Satu kelas ditambahkan ke elemen:

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

CSS

Animasi yang menggunakan steps. Lihat dokumen 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;    
  }
}

Jawaban @ xec memiliki lebih banyak efek slide-in pada titik-titik, sementara ini memungkinkan titik-titik tersebut muncul secara instan.

sepanjang minggu
sumber
1
Maksud saya, Anda menjawab ini seperti 3 tahun kemudian tetapi ini mungkin lebih baik.
Rey
3
@ xckpd7 ya, tapi saya mencari di Google hari ini dan baru saja menemukan jawaban ini. JADI bukan hanya untuk OP, ini adalah sumber daya untuk semua!
Matt Parrilla
1
@MattParrilla Saya OP, dan jika Anda perhatikan saya mengubah jawaban, saya menerima yang ini sebelum saya membuat komentar itu.
Rey
10
Jika Anda menggunakan ini pada teks yang berada di tengah atau diratakan ke kanan, saya sarankan menambahkan inisial margin-right(atau padding?) Dari 20pxdan menganimasikannya 0pxjika Anda tidak ingin teks Anda bergeser selama animasi.
Kimball
1emdi tempat 20pxmungkin bekerja lebih baik untuk CSS dalam jawaban ini
Jeevan Takhar
56

Anda dapat mencoba menggunakan animation-delay propertywaktu dan setiap karakter elipsis. Dalam hal ini saya telah meletakkan setiap karakter elipsis <span class>sehingga saya dapat menganimasikannya secara terpisah.

Saya membuat demo , yang tidak sempurna, tetapi setidaknya menunjukkan apa yang saya maksud :)

Kode dari contoh saya:

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
sumber
Saya suka ide ini dan hanya mengembangkannya sedikit untuk menunjukkan "marching elipses": jsfiddle.net/toddwprice/cRLMw
Todd Harga
Tidak berhasil (?), Jadi saya menambahkan display: inline; dan kemudian titik-titiknya. Apakah ini cara kerjanya? jsfiddle.net/cRLMw/3
Christofer Vilander
4
Maaf @Christofer - lupa menyimpan biola terbaru saya. Ini dia lagi: jsfiddle.net/toddwprice/cRLMw/8 Juga, inilah artikel yang baru saja saya baca yang memiliki beberapa animasi CSS yang menarik: tympanus.net/Tutorials/LoadingAnimations/index4.html
Todd Price
Menggunakan Firefox, saya tidak dapat menyeretnya jika saya hanya mengeklik dan menyeret gambar dalam satu kesempatan. Tetapi jika saya mengklik gambar terlebih dahulu lalu mengklik dan menyeret, saya tidak terhalang untuk menyeret.
Sam Rueby
2
Saya mengubah sedikit HTML dan CSS untuk menggunakan <i> tag ... jsfiddle.net/DkcD4/77
Adam Youngers
32

Bahkan solusi yang lebih sederhana, bekerja dengan cukup baik!

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

Baru saja mengedit konten dengan animasi alih-alih menyembunyikan beberapa titik ...

Demo di sini: https://jsfiddle.net/f6vhway2/1/

Edit: Terima kasih kepada @BradCollins karena telah menunjukkan bahwa contentitu bukan properti yang dapat dianimasikan.

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

Jadi ini adalah solusi hanya WebKit / Blink / Electron. (Tapi ini juga berfungsi di versi FF saat ini)

CodeBrauer
sumber
Saya melihat utas ini minggu lalu. Jawaban sederhana yang bagus!
r8n5n
1
1 untuk menghidupkan content. Untuk mendapatkan irama animasi yang merata, Anda harus menggunakan steps(1)dan menentukan satu bingkai kunci tambahan. Fungsi langkah menentukan jumlah langkah di antara bingkai kunci dan karena kami menentukan setiap bingkai, kami hanya ingin satu langkah di antara mereka. codepen.io/anon/pen/VmEdXj
Jeff Camera
Meskipun saya menyukai keanggunan solusi ini, perlu dicatat bahwa IE11 dan (saat tulisan ini dibuat) Firefox tidak mendukung animasi contentproperti. (Tidak tahu tentang Edge.)
Brad Collins
@BradCollins terima kasih untuk ini! Saya telah mengedit jawaban saya!
CodeBrauer
15

Jawaban singkatnya adalah "tidak juga". Namun, Anda dapat bermain-main dengan animasi lebar dan luapan tersembunyi, dan mungkin mendapatkan efek yang "cukup dekat". (kode di bawah ini disesuaikan hanya untuk firefox, tambahkan prefiks vendor sesuai kebutuhan).

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

demo: http://jsfiddle.net/MDzsR/1/

edit

Tampaknya chrome mengalami masalah dengan menganimasikan elemen semu. Perbaikan yang mudah adalah membungkus elipsis dalam elemennya sendiri. Lihat http://jsfiddle.net/MDzsR/4/

xec
sumber
Tidak berfungsi di Chromium (ya, saya mengubah awalan vendor menjadi -webkitdari -moz).
David mengatakan mengembalikan Monica
@DavidThomas Anda benar - sekarang diuji di Chrome dan tampaknya ada masalah dengan elemen semu. Anda dapat membungkus elipsis dalam elemennya sendiri dan menganimasikannya (akan bekerja di firefox juga) jsfiddle.net/MDzsR/4
xec
1
Solusi yang sangat bagus, dan sempurna untuk aplikasi Firefox OS yang saya kembangkan. Sedikit tweak
feklee
Berikut adalah versi perbaikan yang berfungsi di Chrome, serta berfungsi dengan benar dengan elemen yang tidak rata kiri (tidak mengubah lebar). Juga, ini menunjukkan setiap titik secara berurutan, tanpa artefak pengungkapan geser ini: jsfiddle.net/fze2qxsv
Aayla Secura
@AaylaSecura Jawaban yang diterima memiliki solusi yang lebih bersih menggunakan langkah-langkah sebagai gantinya stackoverflow.com/a/28074607/833146
xec
3

Tambahan terlambat tetapi saya menemukan cara untuk melakukan ini yang mendukung teks tengah.

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

Anda dapat menganimasikan clip(atau lebih baik clip-pathjika Anda tidak membutuhkan dukungan 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>
Luaskan cuplikan

Jakob E
sumber
1

Sebenarnya ada cara CSS murni untuk melakukan ini.

Saya mendapat contoh dari CSS Tricks, tetapi membuatnya juga didukung di Internet Explorer (saya telah mengujinya di 10+).

Periksa Demo: 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
sumber
Anda menambahkan filter khusus IE di keyframe khusus mozilla dan keyframe khusus webkit. Bagaimana ini merupakan peningkatan dari solusi yang sudah diterima? Ia bahkan memiliki masalah yang sama (dalam frame 4 dan 5 hanya dua titik terakhir dan paling terakhir yang terlihat, masing-masing, berlawanan dengan apa yang diuraikan dalam pertanyaan, yang memiliki 3 status berulang, bukan 5)
xec
Pertanyaannya adalah tentang membuat titik pemuatan, dan hanya ada contoh dekat, tidak wajib. Apa yang saya tambahkan adalah awalan, sehingga IE dapat mengenalinya dengan lebih baik dan menampilkannya.
MRadev
3
-webkit-keyframeshanya akan berlaku untuk webkit, dan di dalamnya Anda memiliki kode khusus IE. Kode ini hanya membuang-buang ruang.
xec
0

Inilah solusi saya dengan css murni https://jsfiddle.net/pduc6jx5/1/ dijelaskan: 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>
repo
sumber