CSS animasyonları

Düzenleyebileceğiniz, montaj oluşturabileceğiniz ve hatta oluşturabileceğiniz birçok program var. animasyonlar, her seferinde bu tür interaktif projeleri ekleyen birçok yazılım var. Bu gönderide sizi sadece animasyon dünyasıyla tanıştırmayacağız, aynı zamanda sizi yeni bir arkadaşla da tanıştıracağız.

Bildiğiniz gibi, bilgisayar dünyası, şu anda bir arada var olan web sayfalarının veya çevrimiçi medyanın geliştirilmesi için komutlar ve faydalı araçlarla doludur. Bizimle kalın ve bu yeni öğreticide bilgi işlem ve etkileşim ile seviyenizi artırmanın başka bir yolunu keşfedin.

Animasyonlar nelerdir?

Eğiticiye tam olarak girmenizi istiyoruz, ancak bunun için animasyonlar dünyasına veya grafik tasarım ile ilgili olan, animasyon dünyasına girmek gerekiyor. etkileşimli tasarım. 

Animasyonlar da görsel-işitsel dünyanın bir parçasıdır, aslında içlerinde bir ses ve hareketli bir görüntü tanıtılırsa veya oldukları için hiçbir şey olmazlar. Bu nedenle “animasyon”dan bahsettiğimizde halk arasında “çizgi film” olarak bilinen şeye atıfta bulunuyoruz.

Yukarıda özetlendiği gibi, animasyon, bir şeye, bu durumda karikatürlere hareket verme yeteneğinden kaynaklanmaktadır. Ama tüm bu hareketler nasıl elde ediliyor? çizim veya fotoğraf dizileri birbiri ardına sıralanarak, gözümüzün önünde inandırıcı bir hareket yaratmayı başarıyorlar, bu da görsel illüzyon oyununa giriyor.

Eskiden ilk animasyonlar kağıtlar üzerinde tasarlanırdı, her birinde hareketli karakter adım adım çizilirdi ve sayfanın sonuna gelindiğinde sayfadaki hareket efektini elde etmek için hızlıca tek tek geçilirdi. resim çizme.

Animasyon türleri

Farklı animasyon türleri vardır:

Çizgi Film veya Geleneksel Animasyon

Bu tarz, kahramana kare kare hareket vermekten ibarettir. Başlangıçta, yeterli görsel-işitsel araç olmadığında, her bir karenin (animasyonun arka planı, sahnesi veya arka planı dahil) çizimi ve boyanması yoluyla gerçekleştirildi, daha sonra bir film kaseti olarak bildiğimiz şeye filme alındı.

Stop Motion

Stop Motion, çizgi filmlerle hiçbir ilgisi olmayan bir animasyon tekniğidir. Ayrıca, asıl amacı gerçekte tamamen statik olan nesnelerin hareketlerini simüle etmektir ve iki aşamaya ayrılmıştır: kil veya kil hareketinin animasyonu ve katı nesnelerin animasyonu.

pikselleşme

Pixelation, Stop Motion'dan gelen bir tekniktir ve ne oyuncak ne de model olan nesnelerle değil, sıradan nesneler veya insanlarla çalışmaktan oluşur. Nesneler birden çok kez fotoğraflanır ve her karede hafifçe değişir.

rotoskopi

Başka bir çizimin veya gerçek bir kişinin çiziminin izini sürmek gibi, başka bir çizimin doğrudan çiziminden oluşur. Sinema dünyasında dijital karakterleri yeniden oluşturmak için kullanılan hareket yakalama, yani mocap'ın öncüsü olarak kabul edilir.

Kesiklerle Animasyon veya Kesilmiş Animasyon

Kesim figürlerinden oluşan bir tekniktir, bu figürler kağıt üzerinde veya fotoğrafta gösterilebilir. Karakterlerin gövdesi kesiklere dayalı olarak inşa edilmiştir ve söz konusu kesiklerin değiştirilmesinden hareket ve animasyon ortaya çıkar.

Animasyon 3D

3D animasyon, simülasyonların ve animasyonların gerçekleştirilmesine izin veren bir editör programından kaynaklanır. Bu iki varyantta iyi aydınlatma, kamera hareketleri ve özel efektler bir araya geliyor.

Şu anda aşağıdakiler gibi başka teknikler de var: cam üzerine resim, kumun animasyonu, gujaların perdesi ve selüloit üzerine resim. 

CSS nedir?

Artık animasyon dünyası hakkında biraz daha bilgi sahibi olduğunuza göre, sizi CSS kısaltmaları dünyasıyla tanıştırmamızın zamanı geldi.

standları CSS, "basamaklı stil sayfaları"na bakın. Tasarım sektöründe ve web sayfalarının sunumunda kullanılan bir dilden oluşur, daha da iyisi, bir web sayfasını ilk kez gördüğümüz gibi sunmakla görevli bir dizi araç ve komuttur. bir kez zaten oluşturuldu. Araçla birlikte çalışır HTML (sayfaların temel içeriğinden düzenlenmiştir).

Adı, içerdiği sayfaların sayısına göre belirlenir ve bunlardan biri, diğerlerinden özelliklerini veya özelliklerini devralır. Yani, basit bir blog şablonuyla çalışabilirsiniz, ancak bir sitenin görünümünü özelleştirmek istediğinizde, iyi bir CMS ile birlikte içeriğinizin erişimini artırmanıza yardımcı olacak CSS'yi uygulamanız gerekecektir.

CSS ne için?

CSS ile sayfanızı düzenleyebilirsiniz, yani web sayfanıza tüm bilgileri nasıl bulmak istediğinizi söyleyebilirsiniz, böylece izleyicinin kullanımı kolay ve aynı zamanda kullanışlı olur. Buraya web sayfasının stilinin veya tasarımının parçası olan bazı öğelerin tüm komutlarını girin, örneğin, yazı tipleri, renkler, boyutlar vb. 

Normalde, bu aracın ne hakkında olduğunu daha iyi anlamanız için, dijital pazarlama uzmanları, onları yönetenler oldukları için bunu ilk anlayanlardır.

CSS'de canlandır

Artık animasyonlar ve CSS dünyası hakkında biraz bilgi sahibi olduğunuza göre. Şimdi öğreticiye başlama zamanı.

CSS animasyonları, bir CSS stili ile diğeri arasındaki geçişi canlandırmanıza olanak tanır. Bu animasyonlar iki bileşenden oluşur: a stil CSS animasyonunu ve bir dizi çerçeveler başlangıç ​​ve son durumunu ve ayrıca içindeki olası ara noktaları gösterir.

Bu animasyonların her birinin bir dizi avantajı vardır:

• Basit animasyonlar için kullanımı çok kolaydır, Javascript bilginiz olmadan bile yapabilirsiniz.
• Animasyon, düşük güçlü bilgisayarlarda bile doğru şekilde görüntüleniyor.
• Bir tarayıcı tarafından kontrol edilmesi, performansının ve verimliliğinin optimize edilmesine, böylece sıklığın azaltılmasına ve sekmelerin görünmeyecek şekilde yürütülmesine olanak tanır.

Animasyon ayarları

Bir animasyonu başlatmak için öncelikle onu yapılandırmamız gerekecek. Bunu yapmak için mülke gideceğiz animasyon ve alt özellikleri. Bu araç, animasyonun sırasını bile değil, hem ritmi hem de süresini yapılandırmamıza izin verecektir.

Alt özellikler şunlardır:

animasyon - gecikme

Öğenin yüklendiği an ile animasyon dizisinin başlangıcı arasındaki gecikme süresi.

animasyon - yön

Animasyonun dizinin sonundaki başlangıç ​​karesine mi geri sarılacağını yoksa sonda baştan mı başlaması gerektiğini belirtir.

animasyon süresi

Animasyonun döngüsünü tamamlamak için geçen süreyi gösterir (süre)

animasyon - yineleme - sayma

Tekrarlanma sayısı. belirtebiliriz sonsuz animasyonu süresiz olarak tekrarlamak için

animasyon - isim

Animasyonun karelerinin her birini tanımlayan adı belirtmek için kullanılır.

animasyon - oynat - durum

Animasyon dizisini duraklatmanızı ve devam ettirmenizi sağlar.

animasyon - zamanlama- fonksiyon

Animasyonun ritmini yani animasyon karelerinin nasıl gösterildiğini belirtir, bunun için ivme eğrileri oluşturulur.

animasyon - doldurma - modu

Animasyon bittikten sonra özelliklerin hangi değerlere sahip olacağını belirtir.

Sırayı çerçevelerle ayarlayın

Zamanı, terminolojiyi vb. yapılandırdıktan sonra. Animasyonumuza bir görünüm veya his sunmanın zamanı geldi.

Bunu yapmak için iki yeni çerçeve oluşturacağız ve kuralı kullanacağız. @ana kareler. Bununla, her kare, animasyon dizisi sırasında her bir öğenin nasıl bulunduğunu açıklar.

belirtmek için zaman ve ritim, çerçeve kullanır yüzde ve itibaren ve içinBu sayede başlangıcın ne zaman %0 ve bitişin %100 ile gerçekleştiğini belirtebiliriz.

Çerçeve ve metin animasyonu

Daha fazla çerçeve eklemek ve bunları metinle canlandırmak için, belirli bir süre boyunca hareket ettikçe başlığın artması ve ardından orijinal boyutuna küçülmesi için daha büyük bir başlık yazı tipi boyutu uygulamanız gerekir. Bunun için aşağıdaki kodu oluşturacağız:

%75 yazı tipi - boyutu: %300; kenar boşluğu - sol: %25; genişlik: %150;

Bu kodla, tarayıcıya dizinin %75'inde başlığın sol kenar boşluğu %25 ve boyutu %200 ve genişliği %150 olmasını öneriyoruz.

Animasyon tekrarı

Bir animasyonu tekrarlamak için aşağıdaki özelliği kullanmanız gerekir. animasyon - yineleme - sayma ve kaç kez tekrarlanmasını istediğimizi belirtmeliyiz. Biz de kullanabiliriz sonsuz böylece her zaman tekrarlanır.

Sonuç

Gördüğünüz gibi CSS'de animasyonlu projeler oluşturabilir ve size verdiğimiz adımları takip ederek girebilirsiniz. Sorgulamaya ve kendinizi bilgilendirmeye devam ederseniz, bizim için birçok seçeneğin olduğunu keşfedeceksiniz.

Zaten cesaret ettin mi?