CSS3 Sürekli Döndürme Animasyonu (Yüklenen bir güneş saati gibi)

120

Bir PNG ve CSS3 animasyonu kullanarak Apple tarzı bir etkinlik göstergesini (güneş saati yükleme simgesi) kopyalamaya çalışıyorum. Görüntüyü sürekli olarak döndürüyorum ve yapıyorum, ancak animasyon bittikten sonra bir sonraki dönüşü yapmadan önce bir gecikme var gibi görünüyor.

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to { 
    -webkit-transform: rotate(360deg);
  }
}
#loading img
{
    -webkit-animation-name:             rotate; 
    -webkit-animation-duration:         0.5s; 
    -webkit-animation-iteration-count:  infinite;
    -webkit-transition-timing-function: linear;
    }

Animasyon süresini değiştirmeyi denedim ama hiçbir fark yaratmıyor, eğer onu 5 saniye yavaşlatırsanız, ilk rotasyondan sonra tekrar dönmeden önce bir duraklama olduğu daha belirgindir. Kurtulmak istediğim bu duraklama.

Herhangi bir yardım çok takdir edilmektedir, teşekkürler.

— Gcoop
kaynak

14

Webkit'e özgü kod, CSS3'ü daha az yapmaz .. Diğer sağlayıcılardan hiçbirinin o sırada eşit işlevler sağlamadığını düşünürsek :)

— 19h

4

Animasyonun 0'dan 359'a kadar çalışması gerekmez mi? 0'dan 360'a kadar koştuysa, kare 0'da iki kez oynatılırsınız, çünkü kare 0 ve kare 360 aynı olacaktır ...

— Brad Parks

1

@BradParks Öte yandan 0'dan 359'a giderseniz 359.5'te gerçekleşmesi gereken animasyon tamamen atlanır. Çoğu durumda, 0 ve 360 arasındaki örtüşme, fark edilmeyecek kadar hızlı olacaktır.

— Blazemonger

@Blazemonger mutlaka değil. Bir jsfiddle'da kendiniz deneyebilir ve animasyon süresine bağlı olarak çok ince olmayabileceğini görebilirsiniz.

— Ilan Biala

1

Tüm bu '359 derece' olayı aptalca - animasyonun adımı üzerinde hiçbir kontrolünüz yok. 60 fps ile kare başına 6 derece olan 1 saniyelik bir animasyon varsayarsak, bu nedenle '354 derecede' durmalısınız. ama dediğim gibi burada kare hızı üzerinde kontrolünüz yok, bu yüzden oldukça boşuna. Akıllı bir uygulamanın 0-360'ı algılayıp buna göre ayarlanabileceğini hayal ediyorum. Sadece zamanı ve açıyı 100 ile çarptım - yani. 0 derece ila 36000 derece, bu nedenle teorik aksaklık yalnızca her 100 dönüşte bir meydana gelir. ama yine de ne yaparsan yap, animasyon hataları alacağını buldum

— Simon_Weaver

71

Buradaki sorununuz, -webkit-TRANSITION-timing-functionistediğiniz zaman bir -webkit-ANIMATION-timing-function. 0 ile 360 arasındaki değerleriniz düzgün çalışacaktır.

— rrahlf
kaynak

Tipik bir kopyala-yapıştır hatası. Çok teşekkürler! (Aslında css'imi shareaholic'den aldım ve yanlış adlandırılmış özellik nedeniyle varsayılan easezamanlama işlevini kullandı).

— doekman

55

Ayrıca biraz gecikme fark edebilirsiniz çünkü 0 derece ve 360 derece aynı noktadır, bu nedenle daire içindeki 1. noktadan 1. noktaya geçmektedir. Bu gerçekten önemsizdir, ancak düzeltmek için tek yapmanız gereken 360 derece 359deg

jsfiddle'ım animasyonunuzu gösteriyor:

#myImg {
    -webkit-animation: rotation 2s infinite linear;
}

@-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg);}
    to   {-webkit-transform: rotate(359deg);}
}

Ayrıca, elma yükleme simgesine daha çok benzeyen şey, simgeyi döndürmek yerine gri şeritlerin opaklığını / rengini değiştiren bir animasyon olabilir.

— Ilan Biala
kaynak

3

JS Fiddle'ınız, basit resim döndürme için gördüğüm en özlü uygulamayı içeriyor - mükemmel (ve yayınladığınız için teşekkürler).

— Philip Murphy

teşekkürler başka bir yardıma ihtiyacın olursa haber ver, bu arada, animasyon için webkit öneklerini kullandım ama bunun yerine -moz-css kuralı kullandıkları için mozilla öneklerini de eklemelisin.

— Ilan Biala

ayrıca zamanı ve açıyı 100 ile çarpabilirsiniz - yani. 0 ° 36000 derece :-)

— Simon_Weaver

@Simon_Weaver herhangi bir çift kare görmemek için hala 35999deg olmalıdır.

— Ilan Biala

2

@IlanBiala hariç, grafik kartınızın 720 fps'de çalıştığından çok şüpheliyim ;-) Kare hızını bilmeden kareler arasındaki artışın ne olduğunu bilmeniz imkansız. Eğer bir şey varsa, 348 derece koyabilirsiniz çünkü 60 fps'de yarım saniyede her kare 12 derece ilerler. Sadece 360'ı koymayı ve birinin tarayıcıyı otomatik olarak ayarlaması için akıllı programlamasını tercih ederim

— Simon_Weaver

27

Şu şekilde bir animasyon kullanabilirsiniz:

-webkit-animation: spin 1s infinite linear;

@-webkit-keyframes spin {
    0%   {-webkit-transform: rotate(0deg)}
    100% {-webkit-transform: rotate(360deg)}
}

— Kinglybird
kaynak

2

Harika ve kolay çözüm!

— TheLD

8

Yalnızca webkit sürümü arıyorsanız bu şık geçerli: http://s3.amazonaws.com/37assets/svn/463-single_spinner.html dan http://37signals.com/svn/posts/2577-loading- çevirici animasyon kullanan-css-ve-webkit

— Tudor
kaynak

9

Çok havalı. Aslında hem GIFve hem de iplikçiler topluyorum CSS. Koleksiyonum . Daha fazlasını biliyorsanız, lütfen bana bildirin.

— doekman

1

Kodunuz doğru görünüyor. Bunun bir .png kullandığınız gerçeğiyle ve tarayıcının nesneyi döndürme üzerine yeniden çizme biçiminin verimsiz olup askıda kalmaya neden olduğunu varsayabilirim (hangi tarayıcı altında test ediyorsunuz?)

Mümkünse .png'yi yerel bir şeyle değiştirin.

görmek; http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/

Chrome, bu yöntemi kullanırken bana hiç duraklama vermiyor.

— Alex
kaynak

Mükemmel, varsayımınızın doğru olduğundan oldukça eminim ancak bir PNG kullanıyorum çünkü yükleme simgem bir güneş saati değil, nükleer stil bir sembol ... önermek - teşekkürler!

— Gcoop

1

Resimsiz bir zonklayıcıyı kolayca kullanmanızı sağlayan küçük bir kitaplık yaptım .

CSS3 kullanır, ancak tarayıcı desteklemiyorsa JavaScript'e geri döner.

// First argument is a reference to a container element in which you
// wish to add a throbber to.
// Second argument is the duration in which you want the throbber to
// complete one full circle.
var throbber = throbbage(document.getElementById("container"), 1000);

// Start the throbber.
throbber.play();

// Pause the throbber.
throbber.pause();

Örnek .

— alex
kaynak