CSS Ana Kare Animasyonları Nasıl Oluşturulur

CSS Ana Kare Animasyonları Nasıl Oluşturulur

CSS, geliştiricilere ana kare animasyonunu kullanarak web sayfalarını hayata geçirme yeteneği verir.





CSS animasyonu, çeşitli özellikleri aracılığıyla bir HTML öğesinin başlangıç ​​durumunu değiştirerek elde edilir. Canlandırılabilen bazı genel CSS özellikleri şunları içerir:



Word'de sayfa sonu nasıl silinir
  • Genişlik
  • Boy uzunluğu
  • Konum
  • Renk
  • opaklık

Bu genel CSS özellikleri, istenen sonucu oluşturmak için belirli CSS öğeleri tarafından değiştirilir. Bir web sayfasında animasyonlu bir öğeye rastladıysanız, öğenin animasyon kareleri animasyonu kullanılarak canlandırılmış olma ihtimali vardır.





Ana Kare Öğesi Nedir?

NS ana kareler öğesi erişime sahip olduğu bir veya daha fazla HTML öğesinde kullanılabilir. Bir elemanın durumundaki belirli bir noktayı tanımlar ve bu elemanın o anda sahip olması gereken görünümü belirler.

Bu, sindirilmesi gereken çok şey gibi gelebilir, ancak aslında oldukça basittir. NS ana kareler öğesi her türlü animasyon gereksinimine uyacak şekilde kolayca anlaşılabilen ve ayarlanabilen oldukça basit bir yapıya sahiptir.



Ana Kare Yapı Örneği


@keyframes identifier {
from{
/* where you would like the animation to start from. */
}
to{
/* where you would like the animation to end up */
}
}

Yeşil bir dikdörtgen düğmeyi mavi yuvarlak düğmeye çevirerek canlandırmak istediğinizi varsayalım.

parametreleri dahilinde itibaren Yukarıdaki bölümde, öğenin yeşil bir dikdörtgen düğme gibi görünmesi için gerekli tüm stilleri yerleştirmeniz gerekecek, ardından ile bölümünde, bu düğmeyi mavi yuvarlak bir düğmeye dönüştürmek için tüm stil gerekliliklerini yerine getireceksiniz.



Düşünüyorsanız, bu çok fazla animasyon gibi gelmiyor. Bunun nedeni, tüm bu sürecin önemli bir bileşeninin henüz tanıtılmamış olmasıdır --- bu bileşen, animasyon özelliğidir.

Animasyon Özelliği

NS animasyon özelliği bir dizi farklı alt özelliğe sahiptir; bunlar, istenen HTML öğesini canlandırmak için yukarıdaki ana kare yapısıyla birlikte kullanılır.



Ancak projelerinizde animasyon elde etmek için bu alt özelliklerden sadece beşini ve bunlarla ilişkili değerleri bilmeniz yeterlidir. Bu özellikler şu şekilde bilinir:

  • Animasyon-adı
  • Animasyon süresi
  • Animasyon-zamanlama-fonksiyonu
  • Animasyon gecikmesi
  • Animasyon-yineleme-sayısı

Bir Web Sayfasında Animasyonu Kullanma

Yukarıdaki senaryoyu kullanarak amaç, animasyonlu bir düğme oluşturmaktır.

Düğme Animasyon Örneği







Animation

/* styling the button */
.btn{
color:white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation-name: clickButton;
animation-duration: 5s;
animation-delay: 4s;
animation-iteration-count:infinite;
animation-timing-function: ease-in-out;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}




Click!


Yukarıdaki kodun animasyon bölümü, daha önce bahsedilen beş alt özelliği içermektedir. Her özelliğin çok farklı bir işlevi vardır ve birlikte, hedeflemek için yapılmış herhangi bir HTML öğesini canlandırmak için çalışırlar.

İlgili: CSS Seçicileri Kullanarak Bir Web Sayfasının Bir Kısmı Nasıl Hedeflenir

Animasyon-adı Özelliği

Bu özellik, listedeki en önemli özelliktir. olmadan animasyon adı özelliği , geçmişe geçmek için hiçbir tanımlayıcınız olmaz ana kareler öğesi , parametreleri içindeki tüm kodu işe yaramaz hale getiriyor.

Diğer alt özelliklerden bir veya ikisini eklemeyi unuttuysanız, yine de oldukça iyi bir animasyonunuz olabilir. Ancak, unuttuysanız animasyon adı özelliği animasyonunuz olmazdı.

Animasyon Süresi Özelliği

Bu özellik, animasyonlu bir öğenin bir durumdan diğerine geçerken alması gereken süreyi tanımlamak için kullanılır.

Yukarıdaki örnekte, animasyon süresi özelliği 5 saniyeye (5s) ayarlanmıştır, bu nedenle yeşil dikdörtgen düğmenin tamamen mavi yuvarlak düğme haline gelmesi için toplam 5 saniyesi olacaktır.

Animasyon gecikme özelliği

Bu özellik bir nedenden dolayı önemlidir; bazı web sayfalarının tamamen yüklenmesi birkaç saniye sürebilir (birkaç farklı faktör nedeniyle). Böylece animasyon gecikme özelliği web sayfasının yüklenmesi biraz zaman alırsa, animasyonun hemen başlamasını engeller.

Yukarıdaki örnekte, animasyon gecikme özelliği 4s olarak ayarlanır; bu, animasyonun web sayfası ziyaret edildikten 4 saniye sonrasına kadar başlamayacağı anlamına gelir (web sayfasının animasyon başlamadan önce yüklenmesi için yeterli zaman verir).

Animasyon-yineleme-sayısı Özelliği

Bu özellik, animasyonlu öğenin bir durumdan diğerine kaç kez geçmesi gerektiğini belirtir. NS animasyon-yineleme-sayısı özelliği kelime ve sayı olan değerleri alır. Sayı değeri 1'den yukarı herhangi bir şey olabilirken, kelime değeri genellikle sonsuz .

Yukarıdaki örnekte, animasyon-yineleme-sayma değeri ayarlandı sonsuz , bu, web sayfası açık olduğu sürece button özelliğinin sürekli olarak bir durumdan diğerine hareket edeceği anlamına gelir.

Animasyon-zamanlama-fonksiyonu Özellik

Bu özellik, animasyonlu öğenin bir durumdan diğerine geçerken hareketini belirler. NS animasyon-zamanlama-fonksiyonu özelliği genellikle üç hareket hızı değerinden birine atanır.

  • Kolaylık
  • Kolaylık
  • giriş çıkış kolaylığı

NS kolay giriş çıkış değeri yukarıda kullanılır; bu, animasyonu yavaşça bir durumdan diğerine geçirir. Düğme yeşil bir dikdörtgenden mavi bir daireye dönüşürken amaç yavaş bir geçiş oluşturmaksa, kolaylık değeri . Sadece ters yönde yavaş geçişi isteseydin, hafifletme değeri .

Kodumuzu Azaltmak

Çoğu durumda, bir programın uzunluğunu azaltmak pratik bir yaklaşım olarak görülmektedir. Bunun temel nedeni, daha az kod satırının programlarınızda fark edilmeden hata yapma olasılığını azaltmasıdır.

Yukarıdaki kod dört satır azaltılabilir. Bu, alt özelliklerinin her birini açıkça tanımlamadan sadece animasyon özelliği kullanılarak başarılabilir.

Düğme Animasyonu Örneği İçin Kodu Azaltma







Animation

/* styling the button */
.btn{
color: white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation: clickButton 5s ease-in-out 4s infinite;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}