Bu CSS deyimindeki "@" ifadesi ne anlama geliyor?

Question

@-webkit-keyframes roll { 
    100% { -webkit-transform: rotate(360deg); } 
} 

"@" ve "% 100" ne anlama geliyor?

Answer 1

Bunlar, CSS3 belirtiminin bir parçası olarak resmi kabul aşamasından önce webkit geliştirme ekibi tarafından tanımlanan CSS3 kurallarıdır; dolayısıyla, -webkit'in seçiciye eklenmesi. @, Bunun standart bir seçiciden ziyade bir CSS kuralı olduğunu belirtir. @ -webkit-keyframes, CSS görsel efekt animasyon özellikleri için anahtar karelerin belirtilmesi içindir.

Animasyon için istediğiniz kadar anahtar kare tanımlayabilirsiniz; Sadece son ana kareyi verdiğinizde (animasyonun% 100'ü tamamlandığında) tanımlanmıştır. Örneğin The full syntax and documentation for these rules can be found here.

, sen yavaş başlar ve sonra başlayan ve sorunsuz biten yaparken dönme derecede doğrusal olmayan adımlar vardı, ara kareleri ayarlar olabilir, hızlandırmak için animasyon isteseydi:

@-webkit-keyframes roll { 
    25% { -webkit-transform: rotate(24deg); 
      -webkit-animation-timing-function: ease-in; 
     } 
    50% { -webkit-transform: rotate(72deg); } 
    75% { -webkit-transform: rotate(168deg); } 
    100% { -webkit-transform: rotate(360deg); 
     -webkit-animation-timing-function: ease-out; 
     } 
} 

Answer 2

"@", Stil sayfasında bir At-Kuralı bildirir. Her durumda, kesinlikle özel bir anlamı vardır.

"% 100", @keyframes kuralı tarafından tanımlanan CSS Animasyonunun son durumunu veya bu durumda @ -webkit-keyframes kuralını ifade eder. Animasyonun ilk (% 0) ve final (% 100) durumlarını bildirmeniz gerekir, böylece kullanıcı aracısı animasyonu ne zaman başlatıp durdurduğunu bilir.

İşte bazı daha: At-Kurallar, oluşturma motoruna yönelik yönergelerdir; Düzenli Seçici ve Beyanat bloklarının ötesindeki CSS Kural Seti sözdizimini genişletirler. At-Kurallar, sadece "@keyword" olan bir At-Anahtar Kelime ile bildirilir, ardından kullanılan At-Keyword ile ilgili bir At-Kural Bildirimi gelir. Örnek: @charset "ISO-8859-15";

İsteğe bağlı bağımsız değişkenler, At-Kural Deyimi türüne bağlı olarak At-Anahtar Kelimeyi takip edebilir. Örnek: @media ekranı {color: # 000; }, ekran isteğe bağlı argümandır.