CSS animasyonlarıyla bir üç noktayı canlandırmanın bir yolu var mı?

92

Bir üç nokta animasyonuna sahip olmaya çalışıyorum ve bunun CSS animasyonlarıyla mümkün olup olmadığını merak ediyordum ...

Yani şöyle olabilir

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

Ve temelde böyle devam edin. Herhangi bir fikir?

Düzenleme: böyle: http://playground.magicrising.de/demo/ellipsis.html

css  css-animations 
— Rey
kaynak
3
Animasyonlar dönüşüm değildir, geçiş değildir. Lütfen üçünü karıştırmayın.
— BoltClock
Benzer bir soruya verdiğim yanıtı görün: stackoverflow.com/a/24349758/282729
— feklee

Yanıtlar:

88

@ Xec'in yanıtının biraz değiştirilmiş bir sürümüne ne dersiniz : http://codepen.io/thetallweeks/pen/yybGra

HTML

Öğeye tek bir sınıf eklendi:

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

CSS

Kullanan animasyon steps. MDN belgelerine bakın

.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'in cevabı, noktalar üzerinde daha fazla kayma etkisine sahipken, bu, noktaların anında görünmesini sağlar.

— bütün haftalar
kaynak
1
Yani bunu 3 yıl sonra cevapladınız ama bu muhtemelen daha iyi.
— Rey
3
@ xckpd7 evet, ama bugün bunu googledim ve bu cevabı buldum. SO sadece OP için değil, herkes için bir kaynak!
— Matt Parrilla
1
@MattParrilla OP benim ve cevabı değiştirdiğimi fark ettiyseniz, bu yorumu yapmadan önce bunu kabul ediyorum.
— Rey
10
Bunu ortalanmış veya sağa hizalanmış metin üzerinde kullanıyorsanız, metninizin animasyon sırasında değişmesini istemiyorsanız, bir baş harfini margin-right(veya dolgusu?) 20pxEklemenizi ve buna animasyon eklemenizi öneririm 0px.
— Kimball
1emyerine 20pxbu yanıtta CSS için daha iyi çalışabilir
— Jeevan Takhar
56

animation-delay propertyHer üç nokta karakterini ve zamanını kullanmayı deneyebilirsiniz . Bu durumda, her üç nokta karakterini bir karaktere yerleştirdim, <span class>böylece onları ayrı ayrı canlandırabilirim.

Mükemmel olmayan bir demo yaptım ama en azından ne demek istediğimi gösteriyor :)

Örneğimdeki kod:

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
kaynak
Bu fikri beğendim ve "yürüyen elipsleri" göstermek için biraz genişlettim: jsfiddle.net/toddwprice/cRLMw
— Todd Price
Çalışmadı (?), Bu yüzden display: inline; ve sonra noktalar. İşe yaraması böyle miydi? jsfiddle.net/cRLMw/3
— Christofer Vilander
4
Üzgünüm @Christofer - güncellenmiş kemanımı kaydetmeyi unuttum. İşte yine: jsfiddle.net/toddwprice/cRLMw/8 Ayrıca, bazı ilginç CSS animasyonları içeren az önce okuduğum bir makale: tympanus.net/Tutorials/LoadingAnimations/index4.html
— Todd Fiyatı
Firefox kullanımı Tek seferde sadece tıklayıp resmi sürüklediğimde onu sürükleyemem. Ama önce resme tıklayıp sonra tıklayıp sürüklersem, sürüklemem engellenmez.
— Sam Rueby
2
<i> etiketlerini kullanmak için HTML ve CSS'yi biraz değiştirdim ... jsfiddle.net/DkcD4/77
— Adam Youngers
32

Daha basit bir çözüm bile oldukça iyi çalışıyor!

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

Sadece bazı noktaları gizlemek yerine içeriği animasyonla düzenledim ...

Demo burada: https://jsfiddle.net/f6vhway2/1/

Düzenleme: @BradCollins'e bunun contentcanlandırılabilir bir özellik olmadığını belirttiği için teşekkürler .

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

Yani bu bir WebKit / Blink / Electron tek çözümdür. (Ancak mevcut FF sürümlerinde de çalışır)

— CodeBrauer
kaynak
Bu konuya geçen hafta bakıyordum. Güzel, basit cevap!
— r8n5n
1
Animasyon için +1 content. Eşit bir animasyon ritmi elde etmek için steps(1)fazladan bir ana çerçeve kullanmalı ve tanımlamalısınız. Adım işlevi, ana çerçeveler arasındaki adımların sayısını belirler ve her bir çerçeveyi belirlediğimizden, aralarında yalnızca tek bir adım olmasını istiyoruz. codepen.io/anon/pen/VmEdXj
— Jeff Camera
Bu çözümün zarafetini sevmeme rağmen, IE11 ve (bu yazı itibariyle) Firefox'un contentözelliği canlandırmayı desteklemediğini belirtmek gerekir . (Edge hakkında bilmiyorum.)
— Brad Collins
@BradCollins bunun için teşekkürler! Cevabımı düzenledim!
— CodeBrauer
15

Kısa cevap "gerçekten değil" dir. Ancak, animasyonlu genişlik ve taşma gizlenmiş olarak oynayabilir ve belki "yeterince yakın" bir efekt elde edebilirsiniz. (aşağıdaki kod yalnızca firefox için uyarlanmıştır, gerektiği şekilde satıcı öneklerini ekleyin).

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/

Düzenle

Chrome'un sözde öğeyi hareketlendirmeyle ilgili sorunları olduğu görülüyor. Kolay bir düzeltme, üç noktayı kendi öğesi içine almaktır. Check out http://jsfiddle.net/MDzsR/4/

— xec
kaynak
Chromium'da Çalışmıyor (evet, satıcıya öneki değişti -webkitdan -moz).
— David,
@DavidThomas haklısınız - şimdi Chrome'da test edildi ve sözde öğeyle ilgili sorunları var gibi görünüyor. Üç noktayı
— xec
1
Gerçekten güzel bir çözüm ve geliştirmekte olduğum bir Firefox OS uygulaması için mükemmel. Biraz değiştirdi: jsfiddle.net/feklee/x69uN
— feklee
Sola hizalı olmayan öğelerle doğru şekilde çalışan (genişliği değiştirmeyen) Chrome'da çalışan gelişmiş bir sürümü burada bulabilirsiniz. Ayrıca, her noktayı arka arkaya, bu açıklayıcı eser olmadan gösterir: jsfiddle.net/fze2qxsv
— Secura
@AaylaSecura Kabul edilen yanıt, stackoverflow.com/a/28074607/833146
— xec
3

Geç bir ekleme, ancak bunu yapmanın ortalanmış metni destekleyen bir yolunu buldum.

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

Canlandırabilirsiniz clip(veya clip-pathIE desteğine ihtiyacınız yoksa daha iyi ) 

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>
Snippet'i genişlet

— Jakob E
kaynak
1

Aslında bunu yapmanın saf bir CSS yolu var.

Örneği CSS Tricks'den aldım, ancak aynı zamanda Internet Explorer'da da desteklenmesini sağladım (10+ üzerinde test ettim).

Demoyu kontrol edin: 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
kaynak
Mozilla'ya özel ve webkit'e özgü anahtar karelere yalnızca IE'ye özel özel filtreler ekliyorsunuz. Bu, halihazırda kabul edilmiş çözüme göre nasıl bir gelişme olabilir? Hatta aynı sorunu yaşıyor (4 ve 5 numaralı karelerde, 5 yerine 3 yinelenen durumu olan sorudaki ana hatlarıyla anlatılanın aksine, sırasıyla yalnızca son iki ve en son iki nokta görülebilir)
— xec
Soru, yükleme noktaları oluşturmakla ilgili ve zorunlu değil, sadece yakın bir örnek var. Eklediğim şey öneklerdir, böylece IE onu daha iyi tanıyabilir ve görüntüleyebilir.
— MRadev
3
-webkit-keyframesyalnızca webkit için geçerli olacak ve içinde yalnızca IE kodunuz var. Bu kod alanı israf etmekten başka bir şey yapmaz.
— xec
0

İşte saf css ile çözümüm https://jsfiddle.net/pduc6jx5/1/ açıklandı: 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>
— depo
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.