0 (555)106 23 45

Web Tasarım Hizmetleri

Web Tasarım Hizmetleri

ANİMASYONLAR İÇİN KULLANDIĞIMIZ CSS KODLARI VE ANLAMLARI

@keyframes

Animasyonlar ile ilgili Css kodlarımızı yazmak için kullanılır. @keyframes özelliği içerisindeki from ve to blokları içerisine kodlarımızı yazabiliriz.

Animasyon, belirtilen sürede from içerisindeki Css kodlarından başlar ve kademeli olarak to içerisindeki Css kodlarına dönüşünceye kadar devam eder.

animation

Tüm animasyon özelliklerini toplu olarak tek özellikle belirtmek için kullanılır. Bir animasyon örneğini hem uzun hem de kısa şekliyle yazacak olursak:

** Ayrı ayrı yazarak animasyon örneği **

animation-name: example;

animation-duration: 3s;

animation-timing-function: linear;

animation-delay: 2s;

animation-iteration-count: infinite;

animation-direction: alternate;

** Tek satırda yazarak animasyon örneği **

animation: example3s linear 2s infinite alternate;

animation-delayAnimasyonu belirli bir süre sonra başlatmak için kullanılır.
animation-direction

Animasyonun yönünü belirtmek için kullanılır. 4 değer alabilir. Bunlar:

  • normal : Varsayılan değerdir.
  • reverse : Animasyonun ters yönde çalışmasını sağlar.
  • alternate : Animasyonun önce normal sonra tam tersi yönde çalışmasını sağlar ve bu şekilde devam eder.
  • alternate-reverse : Animasyonun önce ters yönde sonra normal yönde çalışmasını sağlar ve bu şekilde devam eder.
animation-durationAnimasyonun ne kadar sürede tamamlanacağını belirtmek için kullanılır. Varsayılan değeri 0’dır.
animation-fill-mode

Animasyonun bittikten sonraki durumunu belirtmek için kullanılır. animation-fill-mode özelliğine şu değerleri verebiliyoruz:

  • none : Animasyon bittikten sonra başlangıç değerlerine döner. (Varsayılan değerdir.)
  • forwards : Animasyon bittikten sonraki son durumunda kalır ve o son durumdaki değerler uygulanır.
  • backwards : Animasyon bittikten sonra veya durdurulduğunda, başlangıç özellikleri uygulanır.
  • both : forwards ve backwards değerleri birlikte uygulanır.
animation-iteration-countAnimasyonun kaç defa tekrar edeceğini belirtmek için kullanılır. Eğer animasyonun sonsuz döngüye girmesini yani sürekli tekrar etmesini istiyorsak infinite değerini vermemiz gerekiyor.
animation-nameAnimasyonun hangi etikete uygulanmasını istiyorsak, o etikete animation-name özelliği ile yazmış olduğumuz animasyonun adı verilir.
animation-play-state

paused değeri vererek animasyonları durdurmak için kullanılır. animation-play-state özelliğine şu değerleri verebiliyoruz:

  • running : Varsayılan değerdir ve animasyon normal bir şekilde çalışır.
  • paused : Animasyonu durdurmamızı sağlar.
animation-timing-function

Animasyonun gerçekleşme biçimini belirtmek için kullanılır. Örneğin gerçekleşecek animasyon, hızlı bir şekilde başlayıp sonlara doğru yavaşlayabilir. Yavaş bir şekilde başlayıp sonlara doğru hızlanabilir veya sabit bir hızda gerçekleşebilir.

animation-timing-function özelliğine şu değerleri verebiliyoruz:

  • ease : Animasyon, yavaş başlar sonra hızlanır en son tekrar yavaşlar. (Varsayılan değerdir.)
  • linear : Animasyon, baştan sona aynı hızda devam eder.
  • ease-in : Animasyonun yavaş başlamasını sağlar.
  • ease-out : Animasyonun yavaş bitmesini sağlar.
  • ease-in-out : Animasyon, yavaş başlar ve yavaş biter.

KENARLIK VERMEK VEYA KÖŞELERİ YUVARLAMAK İÇİN KULLANDIĞIMIZ CSS KODLARI VE ANLAMLARI

borderBir Html öğesinin 4 tarafına birden kenarlık vermek için kullanılır.
border-leftBir Html öğesine sol kenarlık vermek için kullanılır.
border-rightBir Html öğesine sağ kenarlık vermek için kullanılır.
border-bottomBir Html öğesine alt kenarlık vermek için kullanılır.
border-topBir Html öğesine üst kenarlık vermek için kullanılır.
border-colorBir Html öğesinin 4 tarafına birden kenarlık rengi vermek için kullanılır.
border-left-colorBir Html öğesine sol kenarlık rengi vermek için kullanılır.
border-top-colorBir Html öğesine üst kenarlık rengi vermek için kullanılır.
border-right-colorBir Html öğesine sağ kenarlık rengi vermek için kullanılır.
border-bottom-colorBir Html öğesine alt kenarlık rengi vermek için kullanılır.
border-styleBir Html öğesinin 4 tarafına birden kenarlık stili (tek çizgi, çift çizgi, noktalı vb..) vermek için kullanılır. border-style özelliğine şu değerleri verebiliyoruz:
  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset
  • none
  • hidden
border-right-styleBir Html öğesine sağ kenarlık stili (tek çizgi, çift çizgi, noktalı vb..) vermek için kullanılır.
border-top-styleBir Html öğesine üst kenarlık stili (tek çizgi, çift çizgi, noktalı vb..) vermek için kullanılır.
border-left-styleBir Html öğesine sol kenarlık stili (tek çizgi, çift çizgi, noktalı vb..) vermek için kullanılır.
border-bottom-styleBir Html öğesine alt kenarlık stili (tek çizgi, çift çizgi, noktalı vb..) vermek için kullanılır.
border-widthBir Html öğesinin 4 tarafına birden kenarlık genişliği vermek için kullanılır.
border-top-widthBir Html öğesine üst kenarlık genişliği vermek için kullanılır.
border-right-widthBir Html öğesine sağ kenarlık genişliği vermek için kullanılır.
border-left-widthBir Html öğesine sol kenarlık genişliği vermek için kullanılır.
border-bottom-widthBir Html öğesine alt kenarlık genişliği vermek için kullanılır.
border-radiusBir Html öğesinin 4 köşesini birden yuvarlamak için kullanılır. Değer verirken px veya % (yüzde) olarak verebiliyoruz.
border-top-left-radiusBir Html öğesinin üst sol köşesini yuvarlamak için kullanılır.
border-top-right-radiusBir Html öğesinin üst sağ köşesini yuvarlamak için kullanılır.
border-bottom-left-radiusBir Html öğesinin alt sol köşesini yuvarlamak için kullanılır.
border-bottom-right-radiusBir Html öğesinin alt sağ köşesini yuvarlamak için kullanılır.
outlineBir Html öğesinin 4 tarafına birden (üst, sağ, alt, sol) dış kenarlık vermek için kullanılır.
outline-colorBir Html öğesinin 4 tarafına birden (üst, sağ, alt, sol) dış kenarlık rengi vermek için kullanılır.
outline-styleBir Html öğesinin 4 tarafına birden (üst, sağ, alt, sol) dış kenarlık stili (tek çizgi, çift çizgi, noktalı vb..) vermek için kullanılır. outline-style özelliğine şu değerleri verebiliyoruz:
  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset
outline-widthBir Html öğesinin 4 tarafına birden (üst, sağ, alt, sol) dış kenarlık genişliği vermek için kullanılır. Kenarlık genişliğini px, pt, cm, em, vb. ile belirleyebiliriz.