Popo - css animasyonu. Ek - css animasyonu Animasyonun kısa bir kaydı: güç animasyonu

CSS3 animasyonu Sitelere dinamizm kazandırır. Vaughn web sayfalarını canlandırarak müşteriyle etkileşimi artırıyor. Animasyon, CSS3 geçişlerine ek olarak, belirli bir saat içinde efektleri otomatik olarak oluşturup tekrarlamanıza ve ayrıca döngünün ortasında animasyonu durdurmanıza olanak tanıyan anahtar kareleri temel alır.

CSS3 animasyonu, tüm html öğelerinin yanı sıra sözde öğelere (öncesi ve sonrası) pratik olarak uygulanabilir. Sayfada animasyonlu otoritelerin bir listesi mevcuttur. Animasyon oluştururken şunu unutmayın olası sorunlar Verimlilik, çünkü mevcut otoriteleri değiştirmek çok fazla kaynak gerektirir.

CSS Animasyonuna Giriş

Tarayıcı desteği

yani: 10.0
Firefox: 16,0, 5,0 -moz-
Krom: 43.0, 4.0 -web kiti-
Safari: 4.0 -web kiti-
Opera: 12.1, 12.0 -o-
iOS Safari'si: 9, 7.1 -webkit-
Opera Mini: —
Android Tarayıcı: 44, 4.1 -webkit-
Krom Android için: 44

1. Anahtar çerçeveler

Anahtar kareler, animasyonun çeşitli noktalarında animasyon kontrollerinin anlamını belirtmek için kullanılır. Anahtar kareler bir animasyon döngüsünün davranışını temsil eder; Animasyon sıfır veya daha fazla kez tekrarlanabilir.

Anahtar kareler, aşağıda belirtilen ek @keyframes kuralı kullanılarak belirtilir:

@keyframes Animasyon adları (kuralların listesi)

Animasyon oluşturma kurulumla başlar kilit personel@keyframes kuralları. Çerçeveler hangi aşamada hangi otoritelerin canlandırılacağını gösteriyor. Her çerçeve, bir veya daha fazla güç çifti ve değerinden bir veya daha fazla şok bloğu içerebilir. @keyframes kuralı, öğenin seslendirme kuralını ve bloğunu bağlayan öğenin animasyonuyla eşleşir.

@keyframes gölgesi ((text-shadow: 0 0 3px siyah;)'dan %50 (text-shadow: 0 0 30px siyah;)'a (text-shadow: 0 0 3px siyah;))

Yardım için anahtar çerçeveler oluşturuldu anahtar kelimeler ile arasında (%0 ve %100 değerlerine eşdeğer) veya herhangi bir zamanda ayarlanabilen ek yüzde puanlarıyla. Ayrıca anahtar kelimeleri ve yüzde puanlarını da birleştirebilirsiniz. Kadrolar aynı güç ve öneme sahipse tek bir cümlede birleştirilebilirler:

@ana kareler hareket eder (başlangıçtan, şuraya (üst: 0; sol: 0;) %25, %75 (üst: %100;) %50 (üst: %50;))

%0 veya %100 kareler belirtilmezse tarayıcı, animasyon gücünün değerlerini hesaplayarak (belirtildiği şekilde) bunları oluşturur.

Bir dizi @keyframes kuralı aynı adlarla tanımlandığından geri kalanı belge sırasına göre uygulanır ve öndeki her şey göz ardı edilir.

Şaşkın @keyframes kurallarından sonra, güç animasyonunda yeni kurala güvenebiliriz:

H1 (yazı tipi boyutu: 3,5em; renk: koyu macenta; animasyon: gölge 2'nin sonsuz kolaylığı;)

Sonuç tarayıcıda gösterilmeyebileceğinden, sayısal olmayan değerlerin (nadir bir uyarıyla) canlandırılması önerilmez. Ayrıca orta nokta oluşturmayan güç değerleri için anahtar kareler oluşturmamalısınız; örneğin, color: pink ve color: #ffffff, width: auto ve width: 100px veya border-radius: 0 ve border-radius gibi güç değerleri için. border-radius: %50 (Bu örnekte border-radius: %0 girilmesi doğru olacaktır).

1.1. Anahtar kareler için zamanlama işlevi

Ana kare stili kuralı, animasyonu bir sonraki ana kareye taşırken düzeltilmesini gerektiren zamanlama işlevine de müdahale edebilir.

popo

@keyframes sıçrama ((üst: 100 piksel; animasyon-zamanlama-işlevi: kolaylaştırma;) %25 (üst: 50 piksel; animasyon-zamanlama-işlevi: kolaylaştırma;) %50 (üst: 100 piksel; animasyon-zamanlama- işlev: çıkış kolaylığı;) %75 (üst: 75 piksel; animasyon zamanlama işlevi: giriş kolaylığı;) ila (üst: 100 piksel;))

“Bounce” isimli animasyon için beş adet keyframe belirlenmiştir. Birinci ve diğer anahtar kare arasında (%0 ile %25 arasında), geliştirme işlevi seçilir. İkinci ve üçüncü ana kare arasında (%25 ile %50 arasında), yumuşak hızlanma işlevi seçilir. Ve benzeri. Öğe, yan tarafta 50 piksel yukarı hareket edecek, en yüksek noktasına ulaştıkça ayarlanacak ve ardından 100 piksele düştüğünde hızlanacaktır. Animasyonun diğer yarısı da benzer şekilde yapılır ancak öğeyi 25 piksel yukarıya doğru hareket ettirir.

Anahtar kareye veya %100'e atanan zaman saati işlevi göz ardı edilir.

2. Animasyon adı: güç animasyonu adı

Animasyon adı gücü, öğeye eklenen animasyonların bir listesini belirtir. Her seferinde, animasyon için kontrollerin değerlerini belirleyen kuralda bir anahtar kare seçmeniz gerekir. Ad, kuraldaki her anahtar kareye karşılık gelmediğinden animasyon için güç yoktur ve animasyon sarmalanmayacaktır.

Eğer birden fazla animasyon aynı gücü değiştirmeye çalışırsa, animasyon isim listesinin sonuna en yakın yerde biter.

Animasyonlar büyük/küçük harfe duyarlıdır ve none anahtar kelimesine izin verilmez. Animasyonun özünü yansıtan adı vikorize etmeniz önerilir; bu durumda, kısa çizgi veya alt çizgi simgesi _ ile kesişen bir veya daha fazla kelimeyi vikorize edebilirsiniz.

Güç azalmaz.

sözdizimi

Animasyon adı: yok; animasyon-adı: test-01; animasyon-adı: -sliding; animasyon-adı: dikey olarak hareket ediyor; animasyon-adı: test2; animasyon adı: test3, move4; animasyon-adı: başlangıç; animasyon-adı: miras;

3. Animasyonun gücü: Animasyon süresinin gücü

Animasyon süresinin gücü, bir animasyon döngüsünün süresi anlamına gelir. Saniye s veya milisaniye ms cinsinden belirtilir. Bir öğe için birden fazla animasyon belirtilmişse, farklı saat anlamı koma yoluyla aktaran cilt için.

Güç azalmaz.

sözdizimi

Animasyon süresi: 0,5 saniye; animasyon süresi: 200 ms; animasyon süresi: 2 sn, 10 sn; animasyon süresi: 15s, 30s, 200ms;

4. Zamanlama fonksiyonu: güç animasyonu-zamanlama-fonksiyonu

Animasyon zamanlama işlevi gücü, animasyonun her bir anahtar kare çifti arasında nasıl gelişeceğini açıklar. Animasyon durduğunda zaman saati fonksiyonları takılıp kalmayacaktır.

Güç azalmaz.

sözdizimi

Animasyon zamanlama işlevi: kolaylık; animasyon-zamanlama-işlevi: kolaylık; animasyon zamanlama işlevi: kolaylaştırma; animasyon zamanlama işlevi: giriş kolaylığı; animasyon-zamanlama-fonksiyonu: doğrusal; animasyon-zamanlama-işlevi: adım-başlangıç; animasyon-zamanlama-fonksiyonu: adım sonu; animasyon-zamanlama-fonksiyonu: kübik-bezier(0.1, 0.7, 1.0, 0.1); animasyon-zamanlama-fonksiyonu: adımlar (4, son); animasyon-zamanlama-fonksiyonu: kolaylık, adım-başlangıç, kübik-bezier (0,1, 0,7, 1,0, 0,1); animasyon-zamanlama-fonksiyonu: başlangıç; animasyon-zamanlama-işlevi: devralma;

Ek animasyon için oluşturabilirsiniz etkileri, Örneğin, ilgi çekiciliğin metni veya göstergesi etkilenir.

5. Animasyon tekrarı: güçlü animasyon-yineleme-sayımı

Animasyon-yineleme-sayımı gücü, animasyon döngüsünün kaç kez çalıştığını belirtir. 1 koçanı değeri, animasyonun sonuna kadar bir koçanı çalıştıracağı anlamına gelir. Bu güç çoğu zaman alternatif güç animasyonu yönü değerleriyle birleştirilir, bu da animasyonun alternatif döngülerde ters sırada oluşturulmasına neden olur.

Güç azalmaz.

sözdizimi

Animasyon yineleme sayısı: sonsuz; animasyon yineleme sayısı: 3; animasyon yineleme sayısı: 2,5; animasyon yineleme sayısı: 2, 0, sonsuz;

6. Doğrudan animasyon: animasyon yönünün gücü

Animasyon yönünün gücü, animasyonun herhangi bir döngüde veya tüm döngülerde ters sırada oluşturulması gerektiği anlamına gelir. Animasyon ters sırada gerçekleştirilirse zaman fonksiyonları da tersine çevrilir. Örneğin, ters sırada uygulandığında, giriş kolaylığı işlevi çıkış hızı gibi davranacaktır.

Güç azalmaz.

Animasyon döngüsünün çiftler halinde mi yoksa eşleşmemiş olarak mı tekrarlanacağını belirlemek için tekrar sayısı 1'den başlar.

sözdizimi

Animasyon yönü: normal; animasyon yönü: ters; animasyon yönü: alternatif; animasyon yönü: alternatif-geri; animasyon yönü: normal, ters; animasyon yönü: alternatif, ters, normal; animasyon yönü: başlangıç; animasyon yönü: devralma;

7. Animasyon oluşturma: animasyon oynatma durumunun gücü

Animation-play-state'in gücü, animasyonun başlatılıp başlatılmayacağını veya yürütüleceğini belirler. Döngünün ortasında bir animasyon bağlantısı, güç kullanımıyla mümkündür. JavaScript komut dosyası. Fare imleci bir nesnenin üzerine geldiğinde de animasyonu durdurabilirsiniz - stan: vurgulu.

Güç azalmaz.

sözdizimi

Animasyon oynatma durumu: çalışıyor; animasyon oynatma durumu: duraklatıldı; animasyon oynatma durumu: duraklatıldı, çalışıyor, çalışıyor; animasyon oynatma durumu: başlangıç; animasyon oynatma durumu: devralma;

8. Animasyon gecikmesi: animasyon gecikmesinin gücü

Animasyon gecikmesinin gücü, animasyonun ne zaman başlayacağını belirler. Saniyeler veya milisaniyeler (ms) cinsinden mevcuttur.

Güç azalmaz.

sözdizimi

Animasyon gecikmesi: 5s; animasyon gecikmesi: 3s, 10ms;

9. Animasyonun oluşturulmasından önceki ve sonraki öğenin durumu: güçlü animasyon-doldurma modu

Animasyon doldurma modunun gücü, animasyon pozunun anlamını ve görünümünü belirler. Animasyon sona erdiğinde öğe, çıktı stillerine döner. Animasyondan sonra, animasyon öğeye (animasyon adı ve animasyon gecikmesi) ayarlanmışsa, animasyon güç değerlerine katkıda bulunmaz. Ayrıca animasyon, tamamlandıktan sonra yetkililerin değerlerine (animasyon-süre ve animasyon-yineleme-sayımı) katkıda bulunmaz. Animasyon doldurma modunun gücü bu davranışı geçersiz kılabilir.

Güç azalmaz.

sözdizimi

Animasyon doldurma modu: yok; animasyon doldurma modu: ileri; animasyon doldurma modu: geriye doğru; animasyon doldurma modu: her ikisi de; animasyon doldurma modu: yok, geriye doğru; animasyon doldurma modu: her ikisi de, ileri, hiçbiri;

10. Animasyonun kısa kaydı: güç animasyonu

Oluşturulan animasyonun tüm parametreleri, bunları bir boşluktan geçirerek tek bir güç animasyonunda birleştirilebilir:
animasyon: animasyon-adı animasyon-süre animasyon-zamanlama-işlev animasyon-gecikme animasyon-yineleme-sayı animasyon-yön;

Bir animasyon oluşturmak için yalnızca iki kontrol belirtmeniz gerekir: animasyon adı ve animasyon süresi; diğer kontroller anlamını üstlenir. Gücün yeniden düzenlenme sırası önemli değildir, ancak son animasyon animasyon süresinin saati zorunlu olarak animasyon gecikmesinden önce gelir.

11. Çoklu animasyonlar

Bir öğe için, adlarını virgülle değiştirerek bir dizi animasyon ayarlayabilirsiniz:

Böl (animasyon: gölge 1 saniyelik giriş-çıkış 0,5 saniye alternatif, 5 saniye doğrusal 2 saniye hareket eder;)

Animasyonun önemsizliğini, tekrarı, doğrudanlığı, rukh ve crocs türünü kullanabilirsiniz. Sahte öğeler de dahil olmak üzere tüm öğelere animasyon uygulayabilirsiniz.

Obovyazkova Umova - belirli anlamların netliği. Otomatik değerleri olan güçler animasyonlu DEĞİLDİR.

Safari şu anda sözde öğelerin animasyonunu desteklemiyor; kaydı görüntülemek için lütfen diğer tarayıcıları kullanın

CSS animasyonu örneği:

Animasyon kodu örneği:

@keyframes hareketi (%40 (sol: %50; alt: %75; animasyon zamanlama işlevi: kolaylaştırma;) %80 (sol: %90; alt: -10em;))

Animasyon bağlantıları:

Güneş (animasyon: 15 saniye boyunca sonsuz doğrusal hareket ettirin;)

hareket - animasyon 15'ler - önemsizlik sonsuz - sonsuz tekrar doğrusal - ruh türü

@ana kareler

Animasyonun kendisi @keyframes bloğunun ortasında ayarlanır. @keyframes'den sonra animasyonun adı belirlenir ve ardından ortada figürlü tapınaklar- її croki.

Terimler vidsotki aracılığıyla veya from ve to anahtar sözcükleri kullanılarak belirtilebilir. Bu durumda animasyonun türünü değiştirebilirsiniz (animasyon-zamanlama-fonksiyonu):

Animasyon adı

Animasyona bir ad belirlemek için wiki'yi kullanın.

Olası değerler: bir veya daha fazla animasyon adı. Yıkama açısından önemi: yok.

animasyon adı: hareket ettir; - bir animasyon. animasyon adı: hareket, güneş rengi; - iki animasyon, isimler virgülle belirtilir.

Animasyon süresi

Animasyonun gücü, animasyon süresinin gücüyle kontrol edilir.

Olası değerler: saniye (s) veya milisaniye (ms) cinsinden saat. Çeşitli animasyonlar için cildin saati koma yoluyla ayarlanabilir. Pochatkov değeri - 0s.

Animasyon zamanlama fonksiyonu

Güç, animasyonun türünü ifade eder.

Olası değerler:

pürüzsüz animasyon kolaylık - dövme (çiftleşme anlamı) doğrusal - sağ tarafta kolaylaştırma - uca doğru hızlanma kolaylaştırma - koçana doğru hızlanma kolaylaştırma-çıkış - daha düzgün dövme, daha düşük kolaylık

kübik-bezier (sayı, sayı, sayı, sayı) katlanabilir bir animasyon türü belirlemenizi sağlar. Değerler kübik-bezier.com adresinden manuel olarak seçilebilir.

kübik-bezier(.24,1.49, .29, -0.48);

Pokrokov'un animasyonu adım başlangıç ​​ve adım bitiş - adım adım bir animasyon ayarlamanıza ve her zaman belirli adımları ayarlamanıza olanak tanır. Adım-başlangıç ​​ile, mahsulün başlangıcında ve adım-son ile - sonunda değişiklikler yapılır.

adım sonu Adım-başlangıç ​​girerseniz doktor tek adımda başlayacaktır.

adımlar (sayı) - animasyonun görüntüleneceği adım sayısını belirtmenize olanak tanır; bu durumda adımları belirtmenize gerek kalmadan yalnızca kalan adımları ayarlayabilirsiniz.

Animasyon yineleme sayısı

Animasyon tekrarlarını kontrol eder. Animasyon değerleri: 1 (animasyon bir kez oynatılacaktır).

Olası değerler:

sayı - animasyonun kaç kez oynatılacağı. sonsuz - sonsuz tekrar.

Animasyon yönü

Doğrudan animasyonu ifade eder.

Olası değerler:

normal - animasyon baştan sona düz bir çizgide oynatılacaktır. ters - animasyon önce ters yönde, sonra sondan itibaren oynatılacaktır. alternatif - animasyon baştan sona ve ardından ters yönde oynatılacaktır. alternatif-tersine - animasyon baştan sona ve ardından ters yönde oynatılacaktır.

Animasyon oynatma durumu

Animasyonun ilerleme hızını ve ilerlemesini kontrol eder.

Olası değerler: çalışıyor - animasyon oynatılacak (değerler ayarlandı). duraklatıldı - animasyon ilk anda durur.

Croque'u yönetin, eğer bir düğme varsa çıkmayın, ancak animasyonu şu şekilde de durdurabilirsiniz: fareyle üzerine gelin:

Animasyon gecikmesi

Ek animasyon gecikmesini kullanarak, animasyonun gecikmesini oluşturma başlamadan önce ayarlayabilirsiniz.

Olası değerler: saniye (s) veya milisaniye (ms) cinsinden saat. Anlamlar olumsuz olabilir. Çeşitli animasyonlar için cildin saati koma yoluyla ayarlanabilir. Pochatkov değeri - 0s.

Animasyon doldurma modu

Güç, animasyonun oluşturulduğu saatten sonra animasyonun poz öğesine akıp akmayacağı anlamına gelir.

Olası değerler:

yok - animasyon yalnızca yaratılma saatinde öğeye akar, tamamlandıktan sonra öğe koçan değirmenine dönüşür. ileriye doğru - animasyon, oluşturma tamamlandıktan sonra öğeye akar. geriye doğru - animasyon, oluşturulana kadar öğenin üzerine akar. her ikisi de - animasyon, oluşturma işleminin tamamlanmasından önce ve sonra öğeye akar.

Animasyon başlayana kadar geriye doğru ve her ikisinin de çalışmasını sağlamak için animasyon gecikmesini ayarlayın: 3s; . Öyleyse yeni pencerede kıçı açmak kimin için mantıklı.

Tüm bu güçler başka bir kısa gösterim kullanılarak yazılabilir, örneğin:

Animasyon: 5'li sonsuz alternatifin zamanlaması;

Açık anlamlar animasyon ve önemsizliktir. İlk başta yaratılışın önemi, yaratılışın önemsizliğiyle, diğerinde ise engeliyle saygı görüyor.

Animasyon geciktirme gücü, animasyon döngüsüne başlamadan önceki bekleme süresini ayarlar. 0s veya 0ms değeri animasyonu ikinci aşamada başlatır. Negatif değerler gölgelendirmesiz animasyonu da içerir, bu da animasyonun görünümünde değişikliğe neden olabilir.

Belirli bir değeri belirtmek, onları koma yoluyla aşırı şişirmek kabul edilebilir.

kısa bilgi

sözdizimi

animasyon gecikmesi:<время> [,<время>]*

CSS animasyonunun başlatıldıktan hemen sonra başlaması gerekmez. Bu koçanı geçiş gecikmesinin ek gücüyle kontrol edebilirsiniz. Son saate geçişi işaretlemek için onun önemli bir güce sahip olduğunu belirtin:

Geçiş gecikmesi: 1s; / * Animasyonu bir saniyeliğine açın * /

Bu güç, bir sitede basit etkileşim uygulandığında pek işe yaramaz, ancak daha karmaşık etkiler yaratmanız gerekiyorsa çok kullanışsız olabilir. Geçiş süresine benzer şekilde, geçiş özelliğine atanan dış görünüm gücü için gölgeleme saatini yazabilirsiniz (bu noktada yeniden düzenleme sırasına dikkat etmek de önemlidir):

Geçiş özelliği: renk, arka plan rengi, harf aralığı; geçiş süresi: 1s, 0,5s, 2s; geçiş gecikmesi: 0s, 0s, 2s; / * Harf aralığı animasyonunu 2 saniyeliğine dondurur * /

Tarayıcılar arası uyumluluğu unutmayın - kesinlikle ailenin tüm yetkilileri geçiş Vikoristannya Satıcı önekleri:

Webkit-geçiş-gecikmesi: 1s; -moz-geçiş-gecikmesi: 1s; -o-geçiş gecikmesi: 1s; geçiş gecikmesi: 1s;

Daha pratik

Uygulamada, geçiş gecikmesinin gücü, imleç üzerine getirildiğinde açılan açılır menüler oluştururken sıklıkla takılıp kalıyor. Bu kategoride sadece kulaklı değirmen için değil aynı zamanda parmaklı değirmen için de kayıt yapılmaktadır.

Belki bazı sitelerde tıklamanın kolay olmasına rağmen alt menülerin olduğunu fark etmişsinizdir. Bu davranışın önlenmesine, birincil öğe için ve sözde sınıf: vurgulu öğe için ayarlanan geçiş gecikme gücü yardımcı olur. Değerler değişecektir: Gücün başlangıç ​​durumu için geçiş gecikmesi değeri sıfırdan büyük olmalıdır ve üzerine gelinen imlecin durumu için 0'a ayarlanmalıdır. Örnek:

Alt menü (opaklık: 0; geçiş özelliği: tümü; geçiş süresi: 0,5 sn; geçiş gecikmesi: 1 sn;) .menu: vurgulu .alt menü (opaklık: 1; geçiş gecikmesi: 0 sn;)

Bu kod, imleç üzerine gelindiğinde solmadan menünün görünmesine ve menünün bir saniye boyunca kaybolmasına neden olacaktır. Bu numara kesinlikle bir vikoristan için menüyü kolaylaştıracaktır.

Tarayıcı Uyumluluğu

Bu sayfadaki uyumluluk tablosu yapılandırılmış verilerden oluşturulmuştur. Verilere katkıda bulunmak istiyorsanız lütfen https://github.com/mdn/browser-compat-data adresine göz atın ve bize bir çekme isteği gönderin.

GitHub'daki uyumluluk verilerini güncelleyin