Animasyon Oluşturmak İçin CSS3 Geçişlerini ve Dönüşümlerini Kullanma

CSS3 ile dönüşümler ve geçişler kullanılarak ilginç animasyonlar oluşturulabilir. Dönüşümler, bir öğeyi bir durumdan diğerine değiştirmek için kullanılır. Örnekler, öğeleri döndürmek, hareket ettirmek, eğmek ve ölçeklendirmek olabilir. Bir geçiş olmadan, dönüştürülmekte olan bir öğe aniden bir durumdan diğerine değişir. Bunu önlemek için, değişikliği kontrol edebilmeniz ve daha yumuşak görünmesi için bir geçiş eklenebilir.

CSS3 Dönüşümleri Nasıl Kullanılır?

Yaygın olarak kullanılan birkaç dönüşüm türü vardır. Bu eğitim için 2B örneklere odaklanacağız, ancak 3B dönüşümlerle de harika şeyler yapılabileceğini bilmek güzel. (2D'de uzmanlaştıktan sonra, 3D çok daha kolay olacak!)

Aşağıdaki örneklerde, orijinal dikdörtgenler daha koyu yeşil renktedir ve dönüştürülenler biraz daha saydamdır.

Çevirmek

translate() yöntemi, bir öğeyi mevcut konumundan yeni bir konuma taşır.
Bu kod ile ayarlanan dikdörtgen mevcut konumundan 40 piksel sağa ve 100 piksel aşağı kaydırılır.

 -ms-transform: translate(40px, 100px); /* IE 9 */ -webkit-transform: translate(40px, 100px); /* Safari */ transform: translate(40px, 100px);

Döndür

rotate() yöntemi, bir öğeyi belirtilen derece değeri kadar saat yönünde veya saat yönünün tersine döndürür. Bu kod, dikdörtgeni saat yönünde 40 derece döndürür.

 -ms-transform: rotate(40deg); /* IE 9 */ -webkit-transform: rotate(40deg); /* Safari */ transform: rotate(40deg);

Ölçek

scale() yöntemi, bir öğenin boyutunu artırır veya azaltır (genişlik ve yükseklik için verilen parametrelere göre). Bu örnekte, ayarlanan dikdörtgen, orijinal genişliğinden iki kat ve orijinal yüksekliğinden üç kat daha büyüktür.

 -ms-transform: scale(2, 3); /* IE 9 */ -webkit-transform: scale(2, 3); /* Safari */ transform: scale(2, 3);

çarpıkX

skewX() ile yalnızca x ekseni etkilenir. Bu dikdörtgen, x ekseni boyunca 30 derece eğimlidir:

 -ms-transform: skewX(30deg); /* IE 9 */ -webkit-transform: skewX(30deg); /* Safari */ transform: skewX(30deg);

çarpıkY

Bu aynı fikir, ancak y ekseninde. skewY() yöntemi, bir öğeyi y ekseni boyunca tanımlanan açı kadar eğirir. Bu dikdörtgen, y ekseni boyunca 30 derece eğimlidir.

 -ms-transform: skewY(30deg); /* IE 9 */ -webkit-transform: skewY(30deg); /* Safari */ transform: skewY(30deg); }

çarpık

Hem x hem de y eksenini eğmek istiyorsanız, bu tek bir yerde yapılabilir. skew() yöntemi, belirtilen açıları kullanarak bir öğeyi x ve y ekseni boyunca eğirir. Aşağıdaki örnek, dikdörtgen elemanı x ekseni boyunca 30 derece ve x ekseni boyunca 20 derece eğirir.

 -ms-transform: skew(30deg, 20deg); /* IE 9 */ -webkit-transform: skew(30deg, 20deg); /* Safari */ transform: skew(30deg, 20deg);

Matris

Burası işlerin ilginçleştiği, ancak aynı zamanda doğru durumda daha verimli hale geldiği yerdir. Çok fazla dönüşüm yapıyorsanız ve hepsini tek tek yazmak istemiyorsanız, bu 2B dönüşümler matrix() yöntemiyle birleştirilebilir.

İşte izlenecek temel bir taslak:

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

Sadece bir uyarı, matristeki değerleri bulmak biraz araştırma gerektirir. İşte başlamak için faydalı bir rehber.

Bu örneği yapmak için, işte matris değerleri:

 -ms-transform: matrix(2, -0.3, 0, 1, 0, 0); /* IE 9 */ -webkit-transform: matrix(2, -0.3, 0, 1, 0, 0); /* Safari */ transform: matrix(2, -0.3, 0, 1, 0, 0);

CSS3 Geçişleri Nasıl Kullanılır?

Artık dönüşümler ele alındığına göre, geçişlerle sıklıkla kullanıldıklarına dikkat etmek önemlidir. Bu, aşağıdaki tasarım örneklerinde daha anlamlı olacaktır.

Bir öğenin iki durumu arasındaki geçişi tam istediğiniz gibi yapmak için değerlerin özelleştirilebileceğini akılda tutmakta fayda var. Bunu, CSS özelliklerini değiştirirken animasyon hızını kontrol etmenin bir yolu olarak düşünün. Muhtemelen karşılaşmış olduğunuz bir örnek, bir düğmenin üzerine gelmenizdir. Üzerine geldiğinizde hızlı bir şekilde koyulaşan bir renk yerine "yavaşça kararan" bir renk görmek yaygın bir durumdur. Bu “yavaş kararma” bir geçişle oluşturuldu.

Çok fazla değer belirtiyorsanız, steno kullanışlı olacaktır. transition CSS özelliği, geçiş transition-property , transition-duration , transition-timing-function ve transition-delay için kısa bir özelliktir.

Geçiş Ayrıntıları

tek bir özelliğe geçiş uygulayabileceğiniz için, transition-property , geçişin uygulanacağı CSS özelliğini belirtir. Tek bir özelliğe geçiş uygulama örnekleri, bir arka plan veya bir dönüşüm olabilir. Sitedeki tüm özellikleri hedeflemek isterseniz, transform özelliği all olarak ayarlanabilir.

transition-duration bir özellikteki değişikliklerin hemen yerine belirli bir süre boyunca gerçekleşmesine yardımcı olur. Olası değerler olarak saniye ve milisaniye göreceksiniz.

 transition-duration: 7s; transition-duration: 120ms; transition-duration: 2s, 3s; transition-duration: 10s, 30s, 230ms;

transition-timing-function CSS özelliği, geçişin hızının süresi boyunca değişebilmesi için bir hızlanma eğrisi oluşturmanıza olanak tanır. Denemek için birçok seçenek var.

 transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit;

transition-delay oldukça açıklayıcıdır. Belirtilen bir değer, geçiş efekti başlamadan önce beklenecek saniye veya milisaniye sayısını ayarlar. Initial özelliği varsayılan değerine ayarlayacaktır. inherit belirtilirse bu, özelliği üst öğesinden devraldığı anlamına gelir.

 Here are all the properties: transition-property: background; //all transition-duration: 1s; transition-timing-function: linear; //other options are ease transition-delay: 0.5s;

İşte bir geçiş için temel kısayol kurulumu:

 div { transition: [property] [duration] [timing-function] [delay]; }

Tam kestirme dizi:

 div { transition: background 1s linear 0.5s; }

Animasyon Planlama

Gerçekten ayrıntılı animasyonlar oluşturmadan önce, tamamen çılgınca bir şey oluşturmadan önce bir adım geri atmanız iyi olur (özellikle web'de halka açık olacaksa). Biraz eğlence havası eklemekte yanlış bir şey yok, ama aşırı canlandırmak cazip geliyor. Yarattığınız hareket, dikkati dağıtmamalı, kullanıcı deneyimini anlamlandırmalı ve geliştirmelidir. Bununla birlikte, yaratma zamanı!

Bu eğitimde animasyonları göstermek için animasyonlu gifler olduğunu belirtmek isterim. Gifler tekrarlanıyor, ki bu genellikle tasarımlar için yapılmaz. Onları tekrar etme amacı sadece gösteri amaçlıdır.

Bir Görüntüyü CSS Dönüştürme Özelliğiyle Taşıma

Karmaşık dönüşümlere ve geçişlere geçmeden önce, bir eksen ızgarası üzerindeki koordinatlardan bahsedelim. (Dikkat: Bu, matematik dersindeki grafik kağıdının anılarını geri getirebilir.) Resmi hareket ettirmek için koordinatlar kullanılır.

X ve Y Koordinatları

İşler beklediğinizden biraz farklı görünecek. -y değeri x ekseninin üzerindedir. HTML ve CSS, "ters Kartezyen koordinat sistemi" olarak adlandırılan sistemi kullanır, çünkü web sayfaları sol üstten başlar ve aşağı doğru okunur.

Birinci Animasyon: Yatay Hareketle Temel Dönüşüm

translate() temeline ve bir öğeyi nasıl taşıyabileceğine kısaca değindik. Uygulamaya konulduğunda, kelimenin tam anlamıyla teknenizi gerçekten yüzdürebilir. Yukarıda öğrendiğimiz gibi translate() yöntemi, bir öğeyi mevcut konumundan hareket ettirir (x ekseni ve y ekseni için verilen parametrelere göre).

İlk proje bir denizaltı grafiğini hareket ettirecek. Denizaltıların arada bir havaya çıkması gerekir, bu yüzden onu translate() ile dikkatlice biçimlendireceğiz.

transform: translate(x,y) kullanarak ilk konumundan hareket ettirmek için iki yeni değerin belirtilmesi gerekir. Denizaltının sağa ve yukarı hareket etmesi için x değerinin pozitif, y değerinin negatif olması gerekir. y değeri 0 olarak ayarlanırsa, yukarı değil, yalnızca sağa hareket eder.

Denizaltı transform() ile havaya çıkıyor

Bu örnekte, nesneyi 200px sağa ve 25px yukarı taşıyacağız. Sözdizimi transform: translate(200px,-25px); ve nesne .underwater üzerine gelecek. .underwater:hover .move-right içinde hareket için stiller yaratarak, eylem fareyle üzerine gelindiğinde gerçekleşir.

İşte başlangıç ​​HTML'si:

 <div class="underwater"> <div class="object submarine move-right"> <!-- image is set as a background image on submarine --> </div> </div>

Bunu Codepen'de görün.

Bu temel animasyonu yapmak gerçekten çok fazla CSS gerektirmez:

 .underwater { position: relative; min-height: 600px; background-color: #4fc3da; } .underwater:hover .move-right{ transform: translate( 200px ,-25px ); -webkit-transform: translate( 200px ,-25px ); /** Chrome & Safari **/ -ms-transform: translate( 200px ,-25px ); /** Firefox **/ } .submarine { height: 200px; background: url("little-submarine.svg") no-repeat; } .object { transition: all 2s ease-in-out; -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/ -ms-transition: all 2s ease-in-out; /** Opera **/ }

Gördüğünüz gibi, koordinatlarımız sağ üstteki kareye düşüyordu. Gezinirken, denizaltı dönüşüm nedeniyle yeni koordinatlara doğru hareket eder.

Geçiş nedeniyle işler pürüzsüz görünüyor. transition-duration , bu animasyon için çok hızlı olmayan 2sec olarak ayarlandı. transition-timing-function daha yavaş bir başlangıç ​​ve bitiş sağlayan ease-in-out ayarlandı. Süre süresi daha büyük bir şeye yükseltilirse, bu çok belirgin olacaktır.

Temel Animasyon İki: Anahtar Kareler ve Animasyon ile Yatay Hareket

Dönüşüm bu örnekte biraz farklı kullanılıyor. Bir sonraki animasyonu oluşturmak için anahtar kareler ve animasyon özelliği kullanılacaktır.

Animasyon Karesi Temelleri

@keyframes içinde, animasyon için stilleri ve aşamaları tanımladığınız yerdir. İşte kullanacağımız örnek, "aşağı doğru hareket ederken solma" efekti vermeye yardımcı olacak:

 @keyframes fadeInDown { 0% { opacity: .8; transform: translate(0, 0); } 100% { opacity: 1; transform: translate(0, 30px); } }

Dönüşüm değerleri anahtar karelere dahil edilir. Orijinal yerleşim %0 olarak ayarlanmıştır ve %100'de konum 30 piksel aşağı hareket edecektir.

Animasyon Temelleri

CSS3 animasyonunu kullanmak için animasyon için anahtar kareler belirtirsiniz.

Yukarıda tasarlandığı gibi, @keyframes öğenin belirli zamanlarda sahip olacağı stilleri tutar.

Bunu her yaptığınızda, animasyona açıklayıcı bir ad verdiğinizden emin olun. Bu durumda, fadeOut kullanıyoruz. fadeOut içeren herhangi bir sınıf uygulanacaktır. Animasyonun aşamalarında “from” %0 ve “to” %100 olarak ayarlanmıştır. Bu örnek, yalnızca iki aşama ile oldukça basittir, ancak arasına kesinlikle daha fazla adım eklenebilir.

Animasyon Alt Özelliklerine Sahip Belirli Eylemler

Animation özelliği, bir CSS seçici içindeki @keyframes çağırmak için kullanılır. Animasyonlar genellikle birden fazla alt özelliğe sahip olabilir ve olacaktır.

Anahtar kareler, animasyonun nasıl görüneceğini tanımlar; alt özellikler, animasyon için belirli kuralları tanımlar. Animasyon dizisinin nasıl ilerlemesi gerektiğine ilişkin zamanlama, süre ve diğer önemli ayrıntıların tümü alt özelliklerde yer alır.

Aşağıda animasyon alt özelliklerine ilişkin birkaç örnek verilmiştir:

• Animation-name: Animasyonun ana karelerini açıklayan @keyframesat-rule adı. Önceki örnekteki fadeOut adı, bir animation-name örneğidir.
• Animasyon süresi: Bir animasyonun bir tam döngüyü tamamlaması için gereken süre.
• Animasyon-zamanlama işlevi: Animasyonun zamanlaması, özellikle animasyonun anahtar kareler arasında nasıl geçiş yaptığı. Bu işlev, hızlanma eğrileri oluşturma yeteneğine sahiptir. Örnekler, linear , ease , ease-out ease-in , kolay çıkış , ease-in-out veya cubic-bezier .
• Animation-delay: Öğenin yüklenmesi ile animasyonun başlangıcı arasındaki gecikme.
• Animation-iteration-count: Animasyonun tekrar etmesi gereken sayı. Animasyonun sonsuza kadar devam etmesini ister misiniz? Animasyonu süresiz olarak tekrarlamak için infinite belirtebilirsiniz.
• Animasyon yönü: Bu, dizi boyunca her geçişte animasyonun yön değiştirip değiştirmeyeceğini veya başlangıç ​​noktasına sıfırlanıp kendini tekrar edip etmeyeceğini belirler.
• Animation-fill-mode: Animasyon tarafından yürütülmeden önce ve yürütüldükten sonra uygulanan değerler.
• Animation-play-state: Bu seçenekle, animasyon dizisini duraklatabilir ve devam ettirebilirsiniz. Örnekler none , forwards , backwards veya both .

 .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; -webkit-animation-duration: 4s; animation-duration: 4s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; animation-iteration-count: 1; }

İşte steno ile yazılmış gibi görüneceği şey:

 animation: 4s ease-in-out 1 paused fadeInDown;

İşte HTML yapısı:

 <div class="underwater"> <div class="content-wrap fadeInDown"> <div class="submarine"></div> <h2>Cute Submarine</h2> <p>Text here.</p> </div> </div>

fadeInDown sınıfı, denizaltıyı ve içeriği yukarı ve aşağı hareket ettiriyor.

Anahtar kareleri ayarlayarak animasyonu daha akıcı hale getirme

Birkaç anahtar kare daha ekleyerek animasyonu çok daha akıcı hale getirebiliriz.

 @keyframes fadeInDown { 0% { opacity: .8; transform: translateY(5px); } 25% { opacity: .9; transform: translateY(15px); } 50% { opacity: 1; transform: translateY(30px); } 75% { opacity: 1; transform: translateY(15px); } 100% { opacity: .9; transform: translateY(0); } }

Bunu Codepen'de görün.

Animasyonun Zamanlamasını Ayarlama

Daha fazla anahtar kare eklemek, animasyonu yumuşatmaya yardımcı oldu, ancak daha fazla anahtar kare ile biraz daha fazla etkileşim ve tüm metni içeren div'de bir metin gecikmesi ekleyebiliriz. Denizaltının metinden sekmesini sağlamak eğlenceli bir etkidir, bu nedenle gecikmenin denizaltının hareketiyle aynı hizada olması buna izin verir.

HTML, uygulanan etkili sınıflara sahip olacaktır:

 <div class="underwater"> <div class="submarine move-down fadeInDown"> </div> <div class="moving-content move-down text-delay fadeInDownText"> <p>Text goes here.</p> </div> </div>

Ve işte etkileşimli animasyona izin veren güncellenmiş CSS:

 @keyframes fadeInDown { 0% { opacity: .8; transform: translateY(0); } 25% { opacity: 1; transform: translateY(15px); } 50% { opacity: 1; transform: translateY(30px); } 75% { opacity: 1; transform: translateY(15px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes fadeInDownText { 0% { opacity: .8; transform: translateY(0); } 100% { opacity: 1; transform: translateY(35px); } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } .fadeInDownText { -webkit-animation-name: fadeInDownText; animation-name: fadeInDownText; } .move-down{ -webkit-animation-duration: 4s; animation-duration: 4s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1 } .text-delay { -webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */ animation-delay: 2s; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; }

Bunu Codepen'de görün.

CSS3 Animasyonunda Kübik Bezier İlerleme Çubuğu

Bir ilerleme çubuğu oluşturarak animasyon ilerlememizi kutlamanın zamanı geldi!

Ele aldığımız tüm kavramlar, bunun gibi bir şey yaratmak için bir araya gelecek. İlerleme çubuğu çok yaygın bir kullanıcı arabirimi öğesidir, dolayısıyla bunun gibi işlevsel bir şey oluşturmak, diğer web öğelerinin nasıl canlandırılabileceğini görmenize yardımcı olacaktır.

İşte başlangıç ​​HTML'si:

 <div class="container"> <div class="row"> <div class="masthead"> <p>CSS3 Loading Bar</p> </div> </div> <div class="fast-loader"></div> </div>

Ve onu hayata geçirmek için CSS:

 @keyframes speedSetting { 0% { width: 0px; } 100% { width: 100%; } } @keyframes progressMotion { 0% { opacity: 1; } 50% {opacity: 1; } 100% { opacity: 0; } } .fast-loader { width: 0px; height: 10px; background: linear-gradient(to left, blue,rgba(255,255,255,.0)); animation: speedSetting 2s cubic-bezier(1,.01,0,1) infinite, progressMotion 2s ease-out infinite; -webkit-animation: speedSetting 2s cubic-bezier(1,.01,0,1) infinite, progressMotion 2s ease-out infinite; }

İlk anahtar kare kümesinde, genişlik iki saniyelik bir süre ile %0'dan %100'e çıkıyor. progressMotion anahtar kareler opaklığı kontrol ediyor.

CSS Bezier Eğrisi

Bir geçişin süresi boyunca hızı nasıl değiştireceğini kontrol etmek için cubic-bezier() işlevi transition-timing-function özelliğiyle birlikte kullanılabilir. Bunu animasyonda göreceksiniz. Nasıl biraz daha yavaş başladığını ve sonra hızını artırdığını görüyor musunuz?

Bezier ambalaj kağıdını bir kare olarak resmetmek faydalıdır. Sol alt ve sağ üst, P0 ve P3 olan kilit noktaların olduğu yerlerdir. Bunlar her zaman değişmeyen (0,0) ve (1,1) olarak ayarlanır. Ancak, x veya y değeriyle yeni noktalar belirtirseniz, P1 ve P2, cubic-bezier() işleviyle taşınabilir.

• x1, p1 kontrol noktasının x koordinatıdır
• y1, p1 kontrol noktasının y koordinatıdır
• x2, p2 kontrol noktasının x koordinatıdır
• y2, p2 kontrol noktasının y koordinatıdır

İşte bazı örnek değerler:

x1 = .7
y1 = .16
x2 = .2
y2 = .9

Yani bir örnek şöyle görünebilir:

 cubic-bezier(.7,.16,.2,.9)

İlerleme çubuğu, bir bezier'in bir animasyonun zamanlamasını nasıl özelleştirebileceğinin harika bir örneğidir. Dönüşümler, geçişler ve diğer birçok seçenekle özel animasyonlar kolaylıkla oluşturulabilir. Umarım bu temel CSS3 animasyon örneklerini görmek, başka hangi olasılıkların olduğunu görmenize yardımcı olmuştur.