CSS Transform, web tasarımında çokça kullanılan bir araçtır Sayfaları daha etkileyici hale getirmek için kullanılır ve içeriği daha görsel hale getirir Transform özellikleriyle elemanların boyutlarını ölçeklendirmek, döndürmek, eğmek veya hareket ettirmek mümkündür Bu özellikler, web tasarımcıların web sitelerine özgünlük katmasına yardımcı olur CSS Transform, Rotate, Scale, Translate ve Skew işlevleri gibi farklı dönüştürme işlevleri sunar Bu işlevler sayesinde web sayfalarında interaktif ve etkileyici elemanlar oluşturmak mümkündür Rotate işlevi elemanların belirli bir açıda döndürülmesini sağlar Scale işlevi ise bir elemanın boyutunun artırılmasına veya azaltılmasına olanak tanır Web tasarımında CSS Transform kullanarak yaratıcı animasyonlar da ortaya çıkarılabilir

CSS Transform, web tasarımında en sık kullanılan araçlardan biridir. Transform işlevleri, web sayfalarını hareketli ve dinamik hale getirmek için kullanılır ve içerikleri daha etkileyici hale getirir.

Ayrıca, CSS Transforms kullanarak elemanları boyutlandırabilir, döndürebilir, eğebilir ve belirli bir yön ve mesafe boyunca hareket ettirebilirsin. Bu özellikler, web sayfalarında özgün ve yaratıcı tasarımlar oluşturmak için kullanılan en popüler CSS özelliklerinden biridir.

Özellikle, web sayfalarınızda farklı animasyonlar oluşturmak isterseniz, CSS Transform kullanarak bunları kolayca yapabilirsiniz. Bu işlevler, web tasarımı alanında kullanıldığında, web sayfalarınızı daha profesyonel ve çarpıcı hale getirmenize olanak sağlar.

Web tasarımındaki CSS Transform kullanımının birçok örneği vardır ve her bir özellik sayesinde, web sayfalarınızdaki metinler, resimler ve nesneler daha interaktif ve etkileyici görünebilir.

Web sayfalarınızı kişiselleştirmek ve diğer sayfalardan farklılaştırmak isterseniz, CSS Transform işlevlerine hakim olmanız büyük önem taşır. Bu işlevleri öğrendiğiniz takdirde, web sayfalarınıza özgünlük katmakta zorluk çekmezsiniz.

Dönüştürme İşlevleri

CSS Transform, web sayfalarında görsel açıdan çekici bir tasarım oluşturmak için oldukça kullanışlı bir araçtır. Bu araç sayesinde HTML elementlerini dönüştürmek, ölçeklendirmek, hareket ettirmek ve eğmek mümkündür. Yani bir element üzerinde herhangi bir değişiklik yapmak istediğinizde CSS Transform'u kullanarak kolayca işlemini gerçekleştirebilirsiniz.

CSS Transform, metin, resim ve diğer nesneler için birçok dönüştürme işlevi sunar. Bunlar arasında en sık kullanılanlar Rotate (döndürme), Scale (ölçeklendirme), Translate (hareket ettirme) ve Skew (eğme) işlevleridir. Örneğin, bir resmi Rotate işlevi ile 45 derece döndürerek sayfadaki diğer elemanlarla uyumlu hale getirebilirsiniz veya Scale işlevi ile bir metin kutusunu büyüterek içeriği daha açık bir şekilde görülebilir hale getirebilirsiniz.

Dönüştürme İşlevi	Açıklama
Rotate(deg)	HTML elemanını belirtilen derecede döndürür.
Scale(x,y)	HTML elemanının boyutunu x ve y oranlarında büyütür veya küçültür. Eğer x ve y değerleri eşitlenirse, elemanı boyut olarak sabit tutar.
Translate(x,y)	HTML elemanını belirtilen x ve y mesafelerinde hareket ettirir.
Skew(deg)	HTML elemanını belirtilen derecelerde eğebilir.

Bu dönüştürme işlevlerinin başka bir avantajı ise, web sayfalarının farklı cihazlarda açıldığında bile responsive olarak görünmesini sağlamasıdır. Yani, CSS Transform ile elemanları çevreleyen kutuların boyutunu otomatik olarak ayarlayabilirsiniz.

CSS Transform, web tasarımcılar ve geliştiriciler için oldukça yararlı bir araçtır. Bu işlevler sayesinde web sitelerine görsel olarak ilgi çekici bir tasarım ekleyebilirsiniz.

Rotate

CSS Transform, web sayfalarında elemanların dönüştürülmesi için kullanılan bir tekniktir. Bu teknik sayesinde elemanlara yön vererek hareketleri değiştirilebilir ve birçok etkileyici animasyon oluşturulabilir. Rotate işlevi, elemanları belirli bir açıda döndürmek için kullanılır.

Bu işlev için kullanılan syntax şu şekildedir:

Özellik	Değer	Açıklama
transform: rotate	<açı>deg	Elemanın döndürüleceği açı değeri (0'dan 360'a kadar)
	<açı>grad	Elemanın döndürüleceği açı değeri (0'dan 400'a kadar)
	<açı>turn	Elemanın döndürüleceği açı değeri (1'den 0.5'ye kadar)
	<x> <y>	Elemanın belirli bir nokta etrafında döndürülmesi için x ve y koordinatları
	none	Elemanın herhangi bir rotasyonu yok

Bir örnek olarak, bir resim elementini, mouse hover edildikçe 360 derece yaratmış gibi döndürmek için şöyle bir kod kullanılabilir:

img:hover {  transform: rotate(360deg);}

Rotate işlevi ile yapılabilecek bir diğer etkileyici işlem, elemanları farklı açılar ve noktalar etrafında döndürerek zamana bağlı animasyonlar yaratmaktır.

Özetle, CSS Transform'un rotate işlevi, elemanların dönme hareketlerinde büyük bir esneklik sağlar ve birçok etkileyici animasyonların oluşturulmasına yardımcı olur.

Scale

Scale, CSS Transform kullanarak bir elemanın boyutunu artırıp azaltmanın bir yoludur. Bu işlemi yapmak için transform: scale() kod parçasını kullanabilirsin.

Bu kod parçasında, scale() işlevinin parametresi elemanın yatay ve dikey boyutlarının kaç katı büyütülüp küçültüleceğini belirtir. Örneğin,

Kod Parçası	İşlevi
transform: scale(2);	Elemanın boyutunu 2 kat artırır.
transform: scale(0.5);	Elemanın boyutunu yarısına indirir.
transform: scale(1, 1.5);	Elemanın yatay boyutunu sabit tutar, dikey boyutunu 1.5 kat artırır.

Ayrıca, transform-origin özelliğini kullanarak elemanın hangi noktasından büyütüp küçülmesini istediğimizi belirtebiliriz. Örneğin,

Kod Parçası	İşlevi
transform: scale(2); transform-origin: center;	Elemanı merkez noktasından 2 kat büyütür.
transform: scale(0.5); transform-origin: top right;	Elemanı sağ üst köşesinden yarısına indirir.

Büyütme/küçültme işlevi, özellikle resim galerileri veya ürün detay sayfalarında kullanılabilecek kullanışlı bir CSS Transform özelliğidir. Elemanlarınızı ilgi çekici hale getirmek için Scale işlemini diğer Transform özellikleriyle birleştirebilirsiniz.

Translate

CSS Transform, web sayfalarında pek çok farklı efekt ve stil oluşturma imkanı verir. Bunlardan biri de elemanları belirli bir yön ve mesafe boyunca hareket ettirme işlemidir. Bu işlem, Translate olarak adlandırılır.

Elemanlar, x ve y koordinatlarına göre belirli bir mesafede (örneğin 50px sağa veya 100px aşağıya) hareket ettirilebilirler. Ayrıca, translate işlevi kullanılarak elemanlar dikey ve yatay eksenlerde de hareket ettirilebilirler.

Örneğin, aşağıdaki kod bloğu, bir resmin sağa 50 piksel ve aşağıya 50 piksel hareket ettirilmesini sağlar:

img{     transform: translate(50px, 50px);}

Ayrıca, negatif değerler de kullanarak elemanları istenilen yönde hareket ettirebilirsiniz. Örneğin, aşağıdaki kod bloğu, bir div elemanını yatay eksende 20 piksel sola hareket ettirir:

div{     transform: translate(-20px, 0);}

Translate işlevi, web sayfalarında hareketli ve ilgi çekici efektler oluşturmada oldukça kullanışlıdır. Özellikle animasyonlu sayfalar hazırlarken elemanları bu işlevle hareket ettirebilir, ziyaretçilerinizin dikkatini çekebilirsiniz.

Skew

Skew işlevi, elemanların eğilmesini sağlar ve web sayfalarındaki nesneleri çarpıtmak için kullanılır. Bu işlevle, belirli bir açıda elemanın bir tarafı diğerinden daha yüksek veya düşük olabilir. Skew işlevinin kullanımıyla, resimlerin veya metinlerin yatay veya dikey eğimi değiştirebilirsiniz.

Skew işlevi, x ve y ekseninde iki farklı açıda kullanılabilir. X eksenindeki açı ile eleman soldan sağa doğru eğilebilir ya da sağdan sola doğru eğilebilir. Y eksenindeki açı ise elemanın yukarıdan aşağıya ya da aşağıdan yukarıya eğilmesini sağlar.

Skew işlevinin parametreleri, x ve y eksenindeki açı ölçüleri derece cinsinden belirtilir. Örneğin, elemanı x ekseninde 30 derece sağa veya sola eğmek için "transform: skewX(30deg);" kullanılabilir. Aynı şekilde, elemanı y ekseninde 30 derece yukarı veya aşağı eğmek için "transform: skewY(30deg);" kullanılabilir.

Skew işlevinin kullanımı, elemanların web sayfalarında daha yaratıcı ve ilginç görünebilmesini sağlar. Özellikle, farklı boyutlardaki nesnelerin çarpıtılmasıyla oluşturulan tasarımlar, web sayfalarındaki görsel etkileyiciliği artırabilir.

Aşağıdaki tablo, x ve y eksenindeki açıların farklı değerleriyle nasıl bir seğirme etkisi oluşturabileceğini göstermektedir:

X Ekseni Açısı	Y Ekseni Açısı	Örnek
15deg	0deg	Örnek Metin
0deg	15deg	Örnek Metin
30deg	30deg	Örnek Metin

Skew işlevi, web sayfalarında elemanları daha görsel olarak ilginç hale getiren bir diğer CSS Transform özelliğidir. Bu özellik, web tasarımcılarına elemanları çarpıtmaları için yeni ve yaratıcı yollar sunar.

Geçiş (Transition) Efektleri

Web sayfalarında animasyonlu ve ilgi çekici geçiş efektleri kullanmak, ziyaretçilerin sayfalarınızda daha fazla vakit geçirmesini sağlayabilir. Bu nedenle, CSS Transform ve geçiş efektlerinin kullanımı oldukça önemlidir. CSS Transform ile birlikte kullanılabilen geçiş efektleri, sayfalarınıza canlılık ve dinamizm katarak daha etkileyici hale getirir.

Bununla birlikte, geçiş efektlerinin doğru kullanımı da oldukça önemlidir. Geçiş efektleri sayfalarınızın incelenmesini artırırken, aşırı kullanımı kullanıcıları rahatsız edebilir ve yavaş yüklenme süreleri gibi olumsuz etkilere yol açabilir. Bu nedenle, geçiş efektlerini dikkatli bir şekilde kullanmak gerekir.

CSS Transform kullanarak geçiş efektleri oluştururken, basit geçiş efektlerinden başlayarak zorlu geçiş efektlerine doğru ilerlemek önemlidir. Basit efektler, sayfalarınızı yönlendirmede ya da kullanıcıların dikkatini belirli bir bölgeye çekmede oldukça etkili olabilirler. Örneğin, opacity, color ve background-color özelliklerini kullanarak renk geçişleri oluşturabilirsiniz.

Bununla birlikte, box shadow özelliği ile gölgelendirme geçiş efektleri oluşturabilir ve sayfalarınıza derinlik hissi katabilirsiniz. Box shadow özelliğini kullanarak, elemanlara gölge efekti vererek hem görselliği hem de kullanıcı deneyimini artırabilirsiniz.

Transform geçiş efektleri ise daha zorlu geçişlerdir. Bu tür geçişler, elemanları dönüştürür ve farklı şekillerde hareket ettirirler. Bu şekilde sayfalarınızda daha ilginç ve sıradışı geçişler oluşturabilirsiniz. Örneğin, elemanlarınızı belirli bir açıyla döndürmek ya da yatay/ dikey uzama işlemi yapmak, ziyaretçilerin dikkatini hızlı bir şekilde çekebilir.

Geçiş efektleri oluştururken, unutulmaması gereken en önemli noktalardan biri ise zamanlama. Geçiş süresi ve geçişin nasıl gerçekleşeceği belirlemek, kullanıcı deneyimini etkilemektedir. Doğru zamanlama ve geçiş hızları kullanarak, sayfalarınız daha doğal ve etkileyici olacaktır.

Basit Geçiş Efektleri

CSS Transform kullanarak web sayfalarında basit geçiş efektleri oluşturmak mümkündür. Bu efektlerin başında opacity, color, ve background-color özelliklerinin değişimi gelmektedir.

Opacity özelliği, elemanların saydamlık seviyesini kontrol etmek için kullanılır. Saydamlık değeri 0 ile 1 arasında değişir. Örneğin, şeffaf hale getirerek bir elemanın yavaşça kaybolmasını veya tamamen görünür hale getirerek yavaşça ortaya çıkmasını sağlayabilirsiniz.

Color özelliği, elemanların rengini değiştirmek için kullanılır. Belirli bir zaman dilimi boyunca rengi yavaşça değiştirerek geçiş efektleri oluşturabilirsiniz. Örneğin, bir metin kutusunun arka plan rengini üzerine geldiğinde değiştirerek animasyon etkisi oluşturabilirsiniz.

Background-color özelliği, HTML elementinin arka plan rengini değiştirmek için kullanılır. Bu özellikle arka planın yavaşça değişmesi veya renk tonunun değişmesi gibi geçiş efektleri oluşturulabilir.

Bu özelliklerin değişimi, CSS inline stil özelliği kullanarak yapılabilir. Örneğin, opacity için şu kodları kullanın:

Görünmez metin

Görünür metin

Benzer şekilde, color ve background-color için şu kodları kullanın:

Kırmızı yazı

Mavi arka plan, beyaz yazı

Bu kodlar sayesinde, elementlerin farklı özellikleri değiştirilerek basit geçiş efektleri oluşturulabilir.

Gölgelendirme (Box Shadow) Geçiş Efekti

CSS Transform'un web sayfalarında yaratabileceği bir diğer etkili özellik de gölgelendirme (box shadow) efektidir. Box shadow özelliği, elemanların arkasına veya etrafına gölge eklemeye yarar. Bu efekt, sayfaların daha modern ve derin bir görünüm kazanmasına yardımcı olur.

Box shadow kullanarak gölge efekti oluşturmak oldukça kolaydır. Aşağıdaki örnek kod, bir kutunun etrafına gölge eklenmesini sağlar:

#myDiv {  box-shadow: 5px 5px 10px #888888;}

Yukarıdaki kodda, #myDiv ifadesi seçilen elemanı belirtir. Box shadow ifadesinin içinde, ilk değer gölgenin sağa doğru kaç piksel kaydırılacağını belirler. İkinci değer ise gölgenin aşağı doğru kaç piksel kaydırılacağını belirler. Üçüncü değer gölgenin bulanıklığını belirler ve dördüncü değer ise gölgenin rengini belirler.

Gölge efektlerini oluşturmak için, aynı elemana birden fazla gölge de ekleyebilirsiniz. Aşağıdaki örnekte, bir kutunun etrafına birden fazla gölge efekti eklenmiştir:

#myDiv {  box-shadow:    5px 5px 10px #888888,    -5px -5px 10px #ffffff;}

Yukarıdaki örnekte, kutunun etrafına bir adet gri gölge ve bir adet beyaz gölge eklenmiştir. Gölge efektlerini virgülle ayırmak yeterlidir.

Bu sayede, gölge efektleriyle ilgili pek çok farklı seçenek deneyebilirsiniz. Box shadow özelliğiyle elemanların arkasına ve etrafına gölge ekleyerek, sayfalarınızın daha canlı ve modern bir görünüm kazanmasını sağlayabilirsiniz.

Transform Geçiş Efektleri

CSS Transform, web sayfalarında kullanılan etkileyici animasyonların tasarımında hayati bir rol oynar. Bu nedenle, Transform işlevlerinin nasıl kullanılacağını öğrenmek, daha etkileyici web sayfaları oluşturmanıza yardımcı olur.

Transform işlevleri, öğelerin boyutlarını, dönüşlerini, konumlarını ve çarpıklığını değiştirerek geçiş efektleri oluşturmakta kullanılır. Bu sayede, web sayfalarınıza birçok farklı efekt ekleyebilirsiniz. Transform işlevleriyle yaratabileceğiniz geçiş efektleri arasında; kaybolma efektleri, 3 boyutlu efektler ve hareketli efektler gibi birçok farklı seçenek bulunur.

Bu Transform işlevleri, transition efektleriyle birleştirildiğinde daha etkileyici bir web tasarımı elde edebilmenize yardımcı olur. Örneğin, bir sayfadaki menülere farklı transisyon etkileri eklenerek, her menüdeki içeriğe geçiş yaparken daha etkileyici bir görünüm elde edebilirsiniz.

Transform İşlevi	Açıklama
rotate()	Elemanları döndürür.
scale()	Elemanları büyütür/küçültür.
translate()	Elemanları belirli bir yön ve mesafe boyunca hareket ettirir.
skew()	Elemanları eğimli hale getirir.

Transform işlevleriyle yaratabileceğiniz geçiş efektleri arasında en popüler giderek 3 boyutlu kabarcık dolu efektler, el sallama efektleri, kaybolma efektleri, yukarıdan aşağıya geçiş efektleri gibi birçok farklı seçenek yer alır. Bu sayede farklı bir tarz oluşturmanız mümkün olur.

• transition-delay: Geçiş efektinin gecikme süresini belirler.
• transition-duration: Geçiş efektinin toplam süresini belirler.
• transition-property: Geçiş efektinin hangi özelliklerinin değiştiğini belirler.
• transition-timing-function: Geçiş efektinin animasyon tarzını belirler.

Transform işlevleri, web sayfalarında çok daha etkileyici animasyonlar elde etmenize yardımcı olan çok yönlü bir araçtır. Herhangi bir web sitesinde kullanılabilecek bu işlevler, tasarımın etkileyiciliğini birkaç adım öteye taşır.

Animasyon Oluşturma

Css Transform, tasarımcılara web sayfalarında ilgi çekici animasyonlar oluşturma imkanı sunar. Animasyonlar, web sayfalarının etkileyiciliğini artırmak ve kullanıcı deneyimini geliştirmek için birebirdir. Ancak, iyi bir animasyon oluşturmak için temel bilgilere ihtiyacınız var.

Animasyonlar oluşturmak için kullanılabilecek birçok yolu bulunmaktadır. CSS Transform kullanarak da birbirinden özgün ve yaratıcı animasyonları rahatlıkla oluşturabilirsiniz. Bu işlevin kullanımı oldukça kolaydır ve sayfalarınıza hayat katar.

CSS Transform'da animasyon oluşturmak için kullanabileceğiniz bir diğer yöntem de @keyframes kullanmaktır. @keyframes, animasyonlarınız için çeşitli noktalar belirlemenize olanak tanır. Bu sayede, animasyon hızını ve yönünü kontrol edebilir ve istediğiniz sonucu elde edebilirsiniz. Animasyonlu efektlerin oluşturulmasıyla ilgili bir diğer faktör ise işlevlerdir. Örneğin, infinite (sürekli döngü), alternate (ileri-geri hareket) gibi işlevlerle animasyonlarınızı kişiselleştirebilirsiniz.

Animasyon oluşturmak için CSS Transform temel olarak yeterli olan bir özellik değildir. Ancak, CSS Transitions ve Animations işlevleri kullanılarak, sayfalarınız için düzenli animasyonlar oluşturabilirsiniz. CSS Transform ve Animasyonlar işlevleri sayesinde web tasarımcıları, sıradan sayfaları özgün ve hareketli hale getirerek kullanıcılar üzerinde olumlu bir etki yaratmaktadır.

@keyframes Kullanımı

CSS Transform kullanarak web sayfalarınızda hareket ve geçiş efektleri oluşturabilirsiniz. Bunun için @keyframes kullanımı oldukça önemlidir. @keyframes, bir animasyonu bir dizi aşamada hareket ettirmeye olanak tanır. Bu sayede, örneğin bir resmin yavaş yavaş büyümesi veya kaybolması gibi efektler oluşturabilirsiniz.

@keyframes kullanımı için ilk olarak, animasyonun adını belirleyin. Adı sonra kullanabilmeniz için animasyonun ismi önemlidir. İsim verdikten sonra, animasyonun kaç aşamada gerçekleşeceğini belirleyin. % olarak belirttiğiniz bu aşamalar, animasyonun hangi evrede hangi özelliğe sahip olacağını belirler. Örneğin, %0'da bir resim küçükken, %50'de büyüyecek ve %100'de normal boyutunda olacaktır.

Aşamaları belirledikten sonra, animasyonun ne kadar sürmesi gerektiğini belirtin. Bu süre cinsinden olabilir (örneğin 2s) ya da süreyi başka bir özellikle de belirleyebilirsiniz (örneğin, transition-delay).

Örnek bir kod:

#animasyon {  animation-name: buyume;  animation-duration: 5s;}
@keyframes buyume {  from {width: 200px;}  to {width: 500px;}}

Yukarıdaki kodda, #animasyon id'sine sahip bir element oluşturulmuştur. Bu elemente, buyume adındaki animasyon uygulanacaktır. Animasyon süresi 5 saniye olarak belirtilmiştir. @keyframes ile buyume adındaki animasyon belirlenmiştir. Bu animasyonda, elementin genişliği 200px'den başlar ve 500px'ye kadar büyür.

Ayrıca, @keyframes ile animasyonda kullanacağınız diğer özellikleri de belirleyebilirsiniz. Örneğin, animasyonun hangi noktalarında hangi renk, yazı tipi veya pozisyon gibi özelliklere sahip olacağını belirleyebilirsiniz.

@keyframes kullanarak yaratıcı ve dikkat çekici animasyonlar oluşturabilirsiniz. Animasyonlu efektleri kullanarak, web sayfanızı daha ilgi çekici hale getirebilirsiniz.

Animasyon İşlevleri

CSS Transform kullanarak animasyonlar oluşturmak, web sayfalarına hareketlilik ve canlılık kazandırmak için oldukça etkili bir tekniktir. Bu teknikle oluşturduğunuz animasyonların, hangi durumda oynayacağı, ne kadar süreyle oynayacağı, kaç kez tekrar edeceği gibi birçok işlevi de belirleyebilirsiniz.

Bu noktada CSS Transform'de kullanabileceğiniz bazı animasyon işlevlerini sizlerle paylaşmak istiyoruz:

• infinite: Animasyonun sürekli bir şekilde tekrarlanmasını sağlar.
• alternate: Animasyonun ileri ve geri şeklinde oynatılmasını sağlar.
• ease-in: Animasyonun başlangıcında yavaş, sonunda hızlı olacak şekilde oynatılmasını sağlar.
• ease-out: Animasyonun başlangıcında hızlı, sonunda yavaş olacak şekilde oynatılmasını sağlar.
• linear: Animasyonun başlangıç ve sonunda aynı hızla oynatılmasını sağlar.

Bu animasyon işlevlerini kullanarak, yaratıcı ve etkileyici animasyonlar oluşturabilirsiniz. Ayrıca, farklı durumlar için farklı animasyon işlevlerini belirleyerek animasyonların çeşitliliğini artırabilirsiniz.

Unutmayın, CSS Transform ile sadece nesneleri dönüştürmekle kalmaz, aynı zamanda animasyonlar oluşturarak web sayfalarınızı daha dinamik hale getirebilirsiniz.

Animasyonları Uygulama

CSS transform işlevleriyle oluşturduğunuz animasyonları, HTML sayfanızda herhangi bir elemana uygulayabilirsiniz. CSS kodları içinde belirlediğiniz animasyonun adını, uygulamak istediğiniz elemanın CSS kodlarına yazmanız yeterli olacaktır.

Örneğin, bir metin kutusunu birkaç saniyede bir titreştiren basit bir animasyon oluşturduk. Bu animasyonu uygulamak için, ilgili HTML sayfasındaki metin kutusunun CSS kodlarının içinde aşağıdaki kodu eklememiz yeterli olacaktır:

.element {  animation: shake 0.5s infinite;}@keyframes shake {  0% { transform: translate(0, 0); }  10% { transform: translate(-10px, 0); }  20% { transform: translate(10px, 0); }  30% { transform: translate(-10px, 0); }  40% { transform: translate(10px, 0); }  50% { transform: translate(-10px, 0); }  60% { transform: translate(10px, 0); }  70% { transform: translate(-10px, 0); }  80% { transform: translate(10px, 0); }  90% { transform: translate(-10px, 0); }  100% { transform: translate(0, 0); }}

Burada, .element sınıfı için "shake" adlı bir animasyon oluşturduk. Bu animasyon, 0.5 saniye boyunca sürekli olarak metin kutusunu sağa ve sola hareket ettirerek titreşim efekti oluşturacak.

Animasyonu uygulamak için, ilgili HTML elemanına CSS kodlarında belirtilen sınıf adını eklemek yeterlidir:

<div class="element">Burada bir metin kutusu var.</div>

Bu şekilde, CSS transform işlevleriyle oluşturduğunuz animasyonları sayfanızdaki istediğiniz elemanlara uygulayabilirsiniz.