Animasyonlar

Animasyon, etkileşimli öğeleri vurgulamanın ve ilgi çekmenin harika bir yoludur ve eğlenceyi tasarımlarınıza dahil edin. Bu modülde, animasyon efektlerini nasıl kullanacağınızı göstereceğim.

Bazen, karşılaşabileceğiniz bazı yararlı ipuçları sağlayan arayüzlerde kullanıcının bulunduğu bölüme ilişkin bilgiler sağlar. Bu toplantılarda genellikle size bilginin mevcut olduğunu bildirir ve gerektiğini bileceksiniz. Bu modülde, CSS'ye dokunun.

Yanıp sönen simgeler, kullanıcılarınızın ve önemli bilgilere dikkat edin.

Animasyon kareleri olan bir animasyon dizisi ayarlamak için CSS'yi kullanabilirsiniz. Bu diziler basit, tek durumlu animasyonlar veya karmaşık, zamana dayalı diziler olabilir.

Animasyon karesi nedir?

Çoğu animasyon aracında animasyon kareleri, animasyon atamak için kullandığınız mekanizmadır. zaman damgalarına dönüştürmenizi sağlar.

Örneğin, aşağıda yanıp sönen "yardımcı" için bir zaman çizelgesi verilmiştir nokta. Animasyon çalışır 1 saniye uzunluğunda ve 2 durumu var.

Yanıp sönen animasyonun durumları.

Bu animasyon durumlarının her birinin başladığı ve bittiği belirli bir nokta vardır. Bunları zaman çizelgesinde animasyon kareleriyle eşlersiniz.

Animasyon kareleri içeren parlayıp sönen animasyon.

@keyframes

Tarayıcı Desteği

• . 43)
• . 12)
• . 16
• . 9

Kaynak

CSS @keyframes animasyon kareleriyle aynı kavramı temel alırlar.

Aşağıda, iki eyalet içeren bir örnek verilmiştir:

@keyframes my-animation {
  from {
    transform: translateY(20px);
  }
  to {
    transform: translateY(0px);
  }
}

İlk önemli kısım, özel tanımlayıcı (custom-ident) animasyon kareleri kuralının adını değiştirmeniz gerekir. Bu örnekteki tanımlayıcı my-animation'dır. Özel tanımlayıcı bir işlev adı gibi çalışır. Böylece, CSS kodunuzun başka bir yerinde animasyon kareleri kuralına başvuruda bulunabilirsiniz.

Not: <custom-ident> etiketi, CSS'de çeşitli yerlerde, kendi adınızı kullanabilirsiniz. Bu tanımlayıcılar büyük/küçük harfe duyarlıdır ve bazı kullanamayacağınız kelimeler olacaktır. Örneğin, CSS'de satırları adlandırırken Izgara, span kelimesini kullanamazsınız.

Animasyon kareleri kuralının içinde from ve to, 0% ve 100%, animasyonun başlangıcı ve bitişidir. Aynı kuralı aşağıdaki gibi yeniden oluşturabilirsiniz:

@keyframes my-animation {
    0% {
        transform: translateY(20px);
    }
    100% {
        transform: translateY(0px);
    }
}

Zaman aralığı boyunca istediğiniz kadar konum ekleyebilirsiniz. Yanıp sönen yardımcı örneğinde, iki durum reklama dönüşen iki durum vardır: animasyon kareleri. Bu, animasyon kareleri kuralınızın içinde iki konum olduğu anlamına gelir: bu animasyon karelerinin her biri için değişiklikleri temsil eder.

@keyframes pulse {
  0% {
    opacity: 0;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.4;
  }
}

Animasyonun nasıl etkilendiğini görmek için pulse kuralını düzenlemeyi deneyin. seçin.

animation mülkleri

Tarayıcı Desteği

• . 43)
• . 12)
• . 16
• . 9

Kaynak

@keyframes öğenizi bir CSS kuralında kullanmak için çeşitli animasyonlar tanımlayabilirsiniz. ya da animation özelliğini kullanarak steno özelliği olabilir.

animation-duration

Tarayıcı Desteği

• . 43)
• . 12)
• . 16
• . 9

Kaynak

.my-element {
    animation-duration: 10s;
}

animation-duration özelliği, @keyframes zaman çizelgesinin zaman değeri olarak ne kadar uzun olması gerektiğini tanımlar. Varsayılan olarak 0 saniyeye ayarlanır. Bu, animasyonun çalışmaya devam ettiği ancak daha sonra devam edeceği anlamına gelir. bir şablondur. Negatif zaman değerleri kullanamazsınız.

animation-timing-function

Tarayıcı Desteği

• . 43)
• . 12)
• . 16
• . 9

Kaynak

Animasyonda doğal hareketin yeniden oluşturulmasına yardımcı olması için zamanlama fonksiyonlarını kullanabilirsiniz. animasyonun her bir noktadaki hızını hesaplayabilirsiniz. Hesaplanan değerler genellikle kavisli, animasyonun yayın süresi boyunca değişken hızlarda animation-duration gibi bir öğe raporlanması ve tarayıcı @keyframes içinde tanımlananlardan başka bir değer hesaplar.

CSS'de önceden belirlenmiş ayar olarak kullanılan ve animation-timing-function: linear, ease, ease-in, ease-out, ease-in-out.

.my-element {
    animation-timing-function: ease-in-out;
}

Animasyonun hangi zamanlama işlevini değiştirmeyi deneyin

Yumuşak geçiş Bézier eğrisi, hızı modellemek için kullanılan bir işlev türü. Her bir zamanlama işlev anahtar kelimeleri (ör. ease) önceden tanımlanmış bir Bézier eğrisine referans verir. CSS'de cubic-bezier() işlevini kullanarak doğrudan bir Bézier eğrisi tanımlayabilirsiniz. (dört sayı değerini kabul eder: x1, y1, x2, y2).

.my-element {
    animation-timing-function: cubic-bezier(.42, 0, .58, 1);
}

Bu değerler, eğrinin her bir bölümünü X ve Y ekseni boyunca gösterir.

Örnek bir Bézier eğrisi.

Bézier eğrilerini anlamak karmaşıktır. Bunun gibi görsel araçlar generator anahtar kelimesi oldukça faydalıdır.

steps yumuşak geçiş işlevi

Bazen animasyonunuzu daha ayrıntılı bir şekilde kontrol etmek isteyebilirsiniz. bir eğri boyunca değil, aralıklarla hareket etmesi gerekir. steps() yumuşak geçiş işlevi şunları sağlar: Zaman çizelgesini tanımlı olarak eşit süreye sahip aralıklara bölersiniz.

.my-element {
    animation-timing-function: steps(10, end);
}

İlk bağımsız değişken sayı adımlarıdır. Her bir anahtar kelime için animasyon karelerini adım olarak oynatır. Her animasyon karesi, oynatıldığı süre boyunca hiçbir zaman geçiş yapmadan kendi adımında Adımlardan daha az animasyon karesi varsa tarayıcı adımların arasına animasyon kareleri gösterilir.

İkinci bağımsız değişken yönlendirmedir. end değerine ayarlanırsa Zaman çizelgenizin sonunda adımlar tamamlanır. start değerine ayarlanırsa animasyonunuzun ilk adımı başlar başlamaz tamamlanır. Yani end saatinden bir adım önce sona eriyor.

Animasyonları adım adım içeren ve içermeyen animasyonları karşılaştırın.

animation-iteration-count

Tarayıcı Desteği

• . 43)
• . 12)
• . 16
• . 9

Kaynak

.my-element {
    animation-iteration-count: 10;
}

animation-iteration-count özelliği, @keyframes zaman çizelgesinin animasyon ekler. Varsayılan olarak bu değer 1'dir. Bu, animasyonun zaman çizelgenizin sonuna ulaşması gerekir. Bu değer negatif bir sayı olamaz.

Bu animasyonun yineleme sayısını değiştirmeyi deneyin.

Animasyon döngünüzü oluşturmak için yineleme sayısını infinite olarak ayarlayın. İşte bu şekilde: bu dersin başındaki parlayıp sönen animasyonun nasıl çalıştığını gösterir.

Yanıp sönen animasyon sonsuz bir şekilde yinelenir.

animation-direction

Tarayıcı Desteği

• . 43)
• . 12)
• . 16
• . 9

Kaynak

.my-element {
    animation-direction: reverse;
}

Zaman çizelgesinin animasyon kareleriniz üzerinde hangi yönde ilerleyeceğini animation-direction, şu değerleri alır:

• normal: yönlendirme olan varsayılan değerdir.
• reverse: Zaman çizelgenizde geriye doğru koşur.
• alternate: Her animasyon yinelemesi için zaman çizelgesi her şeyi öğreteceğim.
• alternate-reverse: alternate gibi, ancak animasyon zaman çizelgesini geriye dönük olarak takip edebilirsiniz.

Animasyonun yönünü değiştirmeyi deneyin.

animation-delay

Tarayıcı Desteği

• . 43)
• . 12)
• . 16
• . 9

Kaynak

.my-element {
    animation-delay: 5s;
}

Animasyon-gecikme özelliği, tarayıcının animasyonu başlatmadan önce ne kadar bekleyeceğini tanımlar. animation-duration özelliğinde olduğu gibi bu da zaman değeri alır.

animation-duration işlevinin aksine, animation-delay öğesini negatif olarak tanımlayabilirsiniz değerini alır. Bu, animasyonun önceliklendirebilirsiniz. Örneğin, animasyonunuz 10 saniye uzunluğundaysa ve animation-delay ile -5s arasında, animasyon videonuzun yarısından başlayarak önceliklendirebilirsiniz.

Animasyon gecikmesini değiştirmeyi deneyin.

animation-play-state

Tarayıcı Desteği

• . 43)
• . 12)
• . 16
• . 9

Kaynak

.my-element:hover {
    animation-play-state: paused;
}

animation-play-state özelliği, animasyonu oynatmanızı ve duraklatmanızı sağlar. Varsayılan değer running değeridir. Bunu paused olarak ayarlarsanız animasyon duraklatılır.

İmlecinizi animasyonlu öğenin üzerine getirin ve animasyonu duraklatabilirsiniz.

animation-fill-mode

Tarayıcı Desteği

• . 43)
• . 12)
• . 16
• . 9

Kaynak

animation-fill-mode özelliği, @keyframes zaman çizelgenizdeki hangi değerlerin başladığını veya bittiğinin farkındadır. none, varsayılan değerdir. Animasyon tamamlandığında zaman çizelgenizdeki değerler silinir. Diğer seçenekler şunlardır:

• forwards: Son animasyon karesi, animasyon yönüne göre devam eder.
• backwards: İlk animasyon karesi, animasyon yönüne göre devam eder.
• both: Hem ilk hem de son animasyon kareleri korunur.

Dolgu modunu değiştirmeyi deneyin.

animation sloganı

Her bir özelliği ayrı ayrı tanımlamak yerine, animation kısayolunu kullanarak animasyon özelliklerini şu sıra:

1. animation-name
2. animation-duration
3. animation-timing-function
4. animation-delay
5. animation-iteration-count
6. animation-direction
7. animation-fill-mode
8. animation-play-state

.my-element {
    animation: my-animation 10s ease-in-out 1s infinite forwards forwards running;
}

Animasyonlarla çalışırken dikkat edilmesi gereken noktalar

Kullanıcılar işletim sistemlerini daha az hareket tercih edecek şekilde ayarlayabilir etkileşime geçtiğini gözlemleyeceksiniz. Bu tercihi tespit edebilirsiniz prefers-redued-motion (küçültülmüş hareket) ortam sorgusu:

@media (prefers-reduced-motion) {
  .my-autoplaying-animation {
    animation-play-state: paused;
  }
}

Bu, animasyonsuz bir tercih değildir. Daha ucuza tercih ediliyor. özellikle de beklenmedik animasyonlar. Web sitemiz g.co/newsinitiative/labs üzerinden ve genel performansı hakkında animasyon rehberini inceleyin.

Azaltılmış animasyon örneği deneyin.

Öğrendiklerinizi sınayın

Animasyonlar hakkındaki bilginizi test edin

@keyframes animasyonunun adı veya özel tanımlayıcısı büyük/küçük harfe duyarlı mıdır?

Evet

🎉

Hayır

CSS, 2 animasyonun aynı ada sahip olmasına izin vermez ancak SWOOP ve swoop animasyonlarının birlikte kullanılmasına izin verir.

from ve to anahtar kelimeleri şuna benzer:

start ve end.

Tekrar deneyin.

0% ve 100%.

from, 0% ile aynıdır ve to, %100 ile aynıdır.

0 ve 1

Tekrar deneyin.

animation-timing-function ayrıca şu şekilde de bilinir:

Dinamik zamanlama

Tekrar deneyin.

Gecikme

Tekrar deneyin.

Yavaşlatma

🎉

@keyframes animasyonu içinde bulunması gereken minimum animasyon karesi sayısı kaçtır?

1

Tarayıcı, öğenin mevcut durumunu bir animasyon karesi olarak alır, dolayısıyla en az 1 animasyon karesi gerekir.

2

Tekrar deneyin.

3

Tekrar deneyin.

4

Tekrar deneyin.