CSS ile animasyon nasıl yapılır

Web sitelerinde animasyonlar görmeye ve web tasarımına getirdikleri enerji ve çeşitliliğin tadını çıkarmaya oldukça alıştık. Göz alıcıdırlar, bir siteye biraz görsel ilgi katmanın harika bir yoludur ve genellikle kullanıcılarınız için deneyimi daha heyecanlı hale getirirler.

Geleneksel olarak GIF'ler, SVG'ler, WebGL ve arka plan videoları ile elde edilirken, animasyonlar CSS ile de verimli bir şekilde oluşturulabilir. CSS animasyonları için tarayıcı desteği büyük ölçüde gelişti ve oldukça popüler hale geliyor - uyumlu tarayıcılar arasında Firefox 5+, IE 10+, Chrome, Safari 4+ ve Opera 12+ yer alıyor.

Bugün size adım adım bir demo ile bir CSS animasyonu oluşturmanın temellerini anlatacağım. Bundan sonra etrafta dolaşın ve beş animasyon örneğine göz atın. Tüm bu fikirleri kendi projeleriniz için animasyonlar oluşturmak için kullanabileceksiniz!

CSS animasyon temelleri

Açıkçası, beş eğlenceli CSS animasyonuna dalmadan önce animasyonların nasıl çalıştığının temellerini ele almak önemlidir.
Örneğin, ana kareler CSS animasyonlarının önemli bir bileşenidir. Adobe Flash ile çalıştıysanız veya video düzenleme deneyiminiz varsa bu terime aşina olabilirsiniz. Bu durumda, anahtar kare terimi tam da düşündüğünüz şeydir: belirli bir eylemi belirtmenin bir yolu.

Daha önce bir CSS stil @keyframes ile karşılaşmış olabilirsiniz. Bu @keyframes içinde, animasyon için stilleri ve aşamaları tanımladığınız yerdir. İşte bir fadeout efektinin harika bir örneği:

@-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}

Az önce oluşturduğumuz fadeout animasyon karesinin temelleri şunları içerir:

• Açıklayıcı bir ad: bu durumda fadeOut.
• Animasyonun aşamaları: Başlangıç ​​%0 ve To %100 olarak ayarlandı.
• Her aşamada uygulanacak CSS stilleri.

Varsayılan olarak, bu örnekte başka aşama belirtilmediğinden, Başlangıç ​​%0 ve Bitiş %100 olacaktır.

Animasyon alt özelliklerine sahip belirli eylemler

Bir şeyleri biçimlendirmek için biraz daha fazla şey yapmamız gerekiyor - animation özelliğini alt özelliklerle stillendirmemiz gerekiyor. Ana kareler, animasyonun nasıl görüneceğini tanımlarsa, animasyon alt özellikleri, animasyon için belirli kuralları tanımlar. Bunlar, animasyon dizisinin nasıl ilerlemesi gerektiğine ilişkin zamanlamayı, süreyi ve diğer önemli ayrıntıları yapılandırmanıza olanak tanır.

Animasyon özelliği, bir CSS seçicisi içindeki @keyframes çağırmak için kullanılır. Animasyonlar genellikle birden fazla alt özelliğe sahip olabilir ve olacaktır. İşte alt özellik örnekleri:

Bir hareketli grafik sanatçısıyla ortaklık

Hiçbir şey tasarımlarınızı animasyon kadar hayata geçiremez. Ancak bir animatör veya hareketli grafik sanatçısıyla hiç çalışmadıysanız, hareket size yabancı bir dünya gibi gelebilir. Eğer p hakkında düşünüyorsanız ...

• Animasyon-adı: Animasyonun ana karelerini açıklayan kuraldaki @keyframes keyframes'in adı. Önceki örnekteki fadeOut adı, bir animasyon adı örneğidir.
• Animasyon süresi: Bir animasyonun tam bir döngüyü tamamlaması gereken süre.
• Animasyon-zamanlama-fonksiyonu: animasyonun zamanlaması, özellikle animasyonun ana kareler arasında nasıl geçiş yaptığı. Bu fonksiyon, hızlanma eğrileri oluşturma yeteneğine sahiptir. Örnekler doğrusal, hareket hızı, girme kolaylığı, dışarı hareket kolaylığı, içeri girme kolaylığı veya kübik çerçevedir .
• Animasyon gecikmesi: Öğenin yüklendiği zaman ile animasyonun başlangıcı arasındaki gecikme.
• Animasyon-yineleme-sayısı: animasyonun tekrarlanması gereken sayı. Animasyonun sonsuza kadar devam etmesini ister misiniz? Animasyonu süresiz olarak tekrarlamak için sonsuzu belirtebilirsiniz.
• Animasyon yönü: animasyonun dizi boyunca her geçişte yön değiştirmesi mi yoksa başlangıç ​​noktasına sıfırlanması ve kendini tekrar etmesi mi gerekip gerekmediği.
• Animasyon-doldurma modu: animasyon tarafından yürütülmeden önce ve sonra uygulanan değerler.
• Animasyon-oynatma durumu: Bu seçenekle, animasyon dizisini duraklatabilir ve devam ettirebilirsiniz. Örnekler hiçbiri, ileri, geri veya her ikisidir .

En iyi tarayıcı desteği için hepsini bir araya getirmek

Burada çok şey oluyor ve terminoloji biraz kafa karıştırıcı olabilir. Ancak artık ana karelerin, animasyonun nasıl görüneceğini ve farklı animasyon aşamalarını tanımladığını ve animasyon özelliğinin gecikme, yön, zamanlama vb. gibi animasyon seçeneklerini tanımlamak için alt özellikleri kullandığını biliyoruz.

Satıcı veya tarayıcı öneklerini muhtemelen biliyorsunuzdur - bunlar animasyonlarla çalışırken gereklidir. En iyi tarayıcı desteğine sahip olduğumuzdan emin olmamız gerekiyor. Standart tarayıcı önekleri şunlardır:

• Chrome ve Safari: -webkit-
• Firefox: -moz-
• Internet Explorer: -ms-

Internet Explorer 10, geçişler için bir önek gerektirmez, ancak tüm dönüşümler önek gerektirir. Opera, WebKit stillerini tanıdığı için kapsam dahilindedir.

Geçiş başlangıcı

• -webkit-transition
• -moz-transition
• transition

Dönüştürme başlangıcı:

• -webkit-transform
• -moz-transform
• -ms-transform
• transform

Beş animasyon iş başında

Artık temelleri ele aldığımıza göre, kullanmak için bazı kodlar oluşturalım!

Birinci Animasyon: Daireden kareye

İlki hakkında ayrıntılı bilgi verelim, böylece şimdiye kadar ele aldığımız tüm kavramları anladığımızdan emin olabiliriz. Animasyon bir daire olarak başlayacak ve bir kareye dönüşecektir.

Başlangıç ​​için bir div oluşturmak, animasyonu test etmenin harika bir yoludur:

<div class=”animationOne”>
</div>

Şimdi @keyframes ayarlarımızı yapalım. Bu animasyonun beş aşaması olacak çünkü bir karenin dört kenarı var ve bizim %0 başlangıç ​​noktamız olması gerekiyor. Aşağıda gösterildiği gibi önekleri kullanın, ancak öğreticinin geri kalanında sadece temel bilgilerle basit tutacağız.

@-webkit-keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

@-moz-keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

@-ms-keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

@keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

Şimdi, her aşamada sınır yarıçapının nasıl görüneceğini belirlemek için bazı stiller oluşturalım:

@keyframes circle-to-square {
0%  {
border-radius:50%;
}
25%  {
border-radius:50% 50% 50% 0;
}
50%  {
border-radius:50% 50% 0 0;
}
75%  {
border-radius:50% 0 0 0;
}
100% {
border-radius:0 0 0 0;
}
}

Şimdi, animasyonun her aşamasını ayırt etmeye yardımcı olması için background-color özelliğini ekleyin:

@keyframes circle-to-square {
0%  {
border-radius:50%;
background-color: #6a9bea;
}
25%  {
border-radius:50% 50% 50% 0;
background-color: #90b3ec;
}
50%  {
border-radius:50% 50% 0 0;
background-color: #b0c7ec;
}
75%  {
border-radius:50% 0 0 0;
background-color: #cad7ec;
}
100% {
border-radius:0 0 0 0;
background-color: #dfe3e9;
}
}

Son olarak, animasyonu test div'ine uygulayalım:

.animationOne {
width: 200px;
height: 200px;
-webkit-animation: circle-to-square 2s 1s infinite alternate;
-moz-animation: circle-to-square 2s 1s infinite alternate;
-ms-animation: circle-to-square 2s 1s infinite alternate;
animation: circle-to-square 2s 1s infinite alternate;
}

Animasyon özelliği genellikle stenografiyle yazılır, bu nedenle kodda gerçekte olan şey şudur:

• Animasyon adı circle-to-square .
• Animasyon süresi 2s .
• Animasyon gecikmesi 1s dir.
• Animasyon-yineleme-sayısı infinite , bu nedenle süresiz olarak devam edecektir.
• Ve animasyon yönü alternate . Bu, baştan sona oynayacağı ve başa döneceği anlamına gelir.

Animasyon İki: döndürme

Bu animasyon, bir nesnenin döndürülmesine izin verir.

@keyframes full-rotate {
0%  {
transform: rotate(0deg);
}
25%  {
transform: rotate(45deg);
}
50%  {
transform: rotate(90deg);
}
75%  {
transform: rotate(135deg);
}
100% {
transform: rotate(180deg);
}
}

Animasyon projelerimizi ayrı tutmak için bu ikinci örnek için başka bir div oluşturmayı unutmayın. Bu örnekte animasyonu div'in kendisine ekleyeceğimiz için bir arka plan rengi ekledim.

Bu animasyonun süresi, üç saniyelik bir gecikmeyle iki saniyedir. Animasyon-yineleme-sayısı beştir, bu nedenle bu proje durmadan önce beş kez canlandıracaktır. Animasyon her tek seferde (1,3,5,… ) ters yönde ve her çift seferde (2,4,6,… ) normal yönde oynatılır.

.animationTwo {
width: 200px;
height: 200px;
background-color: #ccc;
animation: full-rotate 2s 3s 5 alternate-reverse;
}

Animasyon Üç: genişlet ve titre

Bu, bir düğme için harika bir animasyon çünkü sayfadaki diğer öğelere kıyasla daha dikkat çekici ve belirgin. Bu aynı zamanda bir :hover durumuna dahil etmeye değer bir şey olabilir.

@keyframes button-flicker {
0% {
transform: scale(1);
}
30% {
transform: scale(1);
}
40% {
transform: scale(1.08);
}
50% {
transform: scale(1);
}
60% {
transform: scale(1);
}
70% {
transform: scale(1.05);
}
80% {
transform: scale(1);
}
100% {
transform: scale(1);
}
}

.btn.pulse {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: Arial;
color: #ffffff;
font-size: 20px;
padding: 10px 20px 10px 20px;
text-decoration: none;
animation: button-flicker 5000ms infinite linear;
}

Bunu test etmek için aşağıdaki başlangıç ​​div'ine ihtiyacımız var:

.animationThree {
width: 200px;
height: 200px;
}

<div class=”animationThree>
<a class="btn pulse" href="">Click me</a>
</div>

Animasyon Dört: metin slayt
Metne biraz animasyon ekleyelim. Bu proje, metninizi bir kez soldan içeri kaydırır.

@keyframes slide-text {
from {
margin-left: 100%;
width: 200%;
}

to {
margin-left: 0%;
width: 100%;
}
}

h1.slide {
animation-name: slide-text;
animation-duration: 3s;
}

Beşinci Animasyon: yavaş yavaş

Sürpriz içerikleriniz var mı? Daha sonra görünmesini istediğiniz içerik için bu solmaya göz atın. Burada pek çok seçeneğiniz var: Karartma hızlı veya yavaş olabilir, bir veya birden çok kez olabilir, vb.

@keyframes fade {
from {
opacity: 0;
}

to {
opacity: 1;
}

}

.animationFive {
width: 200px;
height: 200px;
}

.animationFive img{
animation-name: fade;
animation-duration: 3s;
}

<div class=”animationFive”>
<img src=".." />
</div>

CSS3 animasyonları, web sitenizi hareket ettirmek ve kanal açmak için harikadır! Artık animasyon oluşturmak için temel kavramlara sahip olduğunuza göre, animasyon olanakları sonsuzdur. Neyi canlandıracaksınız?