Etiket: css3

CSS3 animation-name

animation-name :

Animasyon ismini belirlemek için kullanılır.

Örnek

div {
    width: 100px;
    height: 100px;
    background: green;
    color: white;
     position: relative;
    -webkit-animation-name: mymove; /* Chrome, Safari, Opera */
    animation-name: mymove;
    -webkit-animation-duration: 5s;  /* Chrome, Safari, Opera */
    animation-duration: 5s;
   -webkit-animation-iteration-count: 3; /* Chrome, Safari, Opera */
    animation-iteration-count: 3;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    from {top: 0px;}
    to {top: 200px;}
}

@keyframes mymove {
    from {top: 0px;}
    to {top: 200px;}
}

Codepen Ön izleme

 

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
keyframename Animasyon ismi
none Değer almaz.
İnital
İnherit

Tarayıcı Desteği
43.0
4.0-webkit		 16.0
5.0-moz		 10.0 9.0
4.0-webkit		 30.0
12.0-o
15.0-webkit
Posted on by Samed GÖZÜTOK 1

CSS3 animation-iteration-count

animation-iteration-count :

Bir animasyonun oynama (tekrar) sayısını belirler.

Örnek

div {
    width: 100px;
    height: 100px;
    background: green;
     color: white;
      position: relative;
    -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
    animation: mymove 5s infinite;
    -webkit-animation-iteration-count: 3; /* Chrome, Safari, Opera */
    animation-iteration-count: 3;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    from {top: 0px;}
    to {top: 200px;}
}

@keyframes mymove {
    from {top: 0px;}
    to {top: 200px;}
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
Number Tekrar sayısını belirtilir. Hiç bir sayı yazılmasa 1 olarak kabul edilir.
infinite Animasyonu sürekli olarak tekrarlatır.
İnital
İnherit

Tarayıcı Desteği
43.0
4.0-webkit		 16.0
5.0-moz		 10.0 9.0
4.0-webkit		 30.0
12.0-o
15.0-webkit
Posted on by Samed GÖZÜTOK 0

CSS3 animation-fill-mode

animation-fill-mode :

Animasyon tamamlandığında veya gecikme olduğunda obje için bir stil (konum, basamak) belirler.

Örnek

div {
    width: 100px;
    height: 100px;
    background: green;
     color: white;
      position: relative;
    -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
    animation: mymove 5s infinite;
    -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
    animation-duration: 4s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    from {top: 0px;}
    to {top: 200px;}
}

@keyframes mymove {
    from {top: 0px;}
    to {top: 200px;}
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
none Herhangi bir değer almaz.
forwards animation-iteration-count ile yenileme miktarı belirlenir. Obje son karede (animasyon basamağında) durur.
backwards Obje animasyon bitince veya donduğunda i ilk kareye (animasyon basamağına) döner.
animation-delay Animasyonun yapılacağı süreyi belirler. Gecikme süresi de denilebilir.
both
İnital
İnherit

Tarayıcı Desteği
43.0
4.0-webkit		 16.0
5.0-moz		 10.0 9.0
4.0-webkit		 30.0
12.0-o
15.0-webkit
Posted on by Samed GÖZÜTOK 0

CSS3 animation-duration

animation-duration :

Animasyon döngüsünün süresini belirler.

Örnek

div {
    width: 100px;
    height: 100px;
    background: green;
     color: white;
      position: relative;
    -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
    animation: mymove 5s infinite;
    -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
    animation-duration: 4s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    from {top: 0px;}
    to {top: 200px;}
}

@keyframes mymove {
    from {top: 0px;}
    to {top: 200px;}
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
time Animasyonu bitirmek için gereken süreyi belirler.
İnital
İnherit

Tarayıcı Desteği
43.0
4.0-webkit		 16.0
5.0-moz		 10.0 9.0
4.0-webkit		 30.0
12.0-o
15.0-webkit
Posted on by Samed GÖZÜTOK 2

CSS3 animation-direction

animation-direction :

Bir animasyonun yön özelliğidir. Ters yönde veya alternatif yönde oynamasını belirler.

Örnek

div {
    width: 100px;
    height: 100px;
    background: green;
     color: white;
      position: relative;
    -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
    animation: mymove 5s infinite;
    -webkit-animation-direction: alternate; /* Chrome, Safari, Opera */
    animation-direction: alternate;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    from {top: 0px;}
    to {top: 200px;}
}

@keyframes mymove {
    from {top: 0px;}
    to {top: 200px;}
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
normal Animasyonu normal şekilde oynatır.
reserve Animasyonu ters yönde oynatır.
alternate Animasyonu tekrar geriye doğru oynatır. Yaptığı hareketleri geriye doğru aynısı tekrarlar.
alternate-reserve Animasyonu önce ters yönde başlayarak hareketlerini daha sonra geriye doğru tekrar eder.
İnital
İnherit

Tarayıcı Desteği
43.0
4.0-webkit		 16.0
5.0-moz		 10.0 9.0
4.0-webkit		 30.0
12.0-o
15.0-webkit
Posted on by Samed GÖZÜTOK 1

CSS3 animation-delay

animation-delay :

Animasyonun yapılacağı süreyi belirler. Gecikme süreside denilebilir.

Örnek

div {
    width: 100px;
    height: 100px;
    background: green;
     color: white;
      position: relative;
    -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
    animation: mymove 5s infinite;
    -webkit-animation-delay: 3s; /* Chrome, Safari, Opera */
    animation-delay: 3s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    from {top: 0px;}
    to {top: 200px;}
}

@keyframes mymove {
    from {top: 0px;}
    to {top: 200px;}
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
time İsteğe bağlı. Önce beklenecek süre tanımlanır. Varsayılan değer 0 dır. Negatif değerlere izin verilir.
İnital
İnherit

Tarayıcı Desteği
43.0
4.0-webkit		 16.0
5.0-moz		 10.0 9.0
4.0-webkit		 30.0
12.0-o
15.0-webkit
Posted on by Samed GÖZÜTOK 0

CSS3 animation

animation :

Elementlere animasyonlar eklemek için kullanılır.

Örnek

div {
    width: 100px;
    height: 100px;
    background: green;
     color: white;
      position: relative;
    -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
    animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    from {top: 0px;}
    to {top: 200px;}
}

@keyframes mymove {
    from {top: 0px;}
    to {top: 200px;}
}

Codepen Ön izleme

Css Sözdizimi

Değer Açıklama
animation-name Animasyon ismini belirlemek için kullanılır. Her @keyframes animasyon için bir isim belirlemek gerekir.
animation-duration Animasyon döngüsünün süresini belirler.
animation-timing-function Animasyonda bir hız eğrisi belirler.
animation-delay Animasyonun yapılacağı süreyi belirler. Gecikme süresi de denilebilir.
animation-iteration-count Bir animasyonun oynama (tekrar) sayısını belirler.
animation-direction Bir animasyonun yön özelliğidir. Ters yönde veya alternatif yönde oynamasını belirler.
animation-fill-mode Animasyon tamamlandığında veya gecikme olduğunda obje için bir stil (konum, basamak) belirler.
animation-play-state Animasyonu çalışıp durdurmanızı sağlar.
İnital
İnherit

Tarayıcı Desteği
43.0
4.0-webkit		 16.0
5.0-moz		 10.0 9.0
4.0-webkit		 30.0
12.0-o
15.0-webkit
Posted on by Samed GÖZÜTOK 0

CSS3 word-wrap

word-wrap :

Çerçeveye sığmayan yazıları kesip alt satıra atmak için kullanılır.

Örnek

p {
  width: 300px;
  border :1px solid red;
  word-wrap: break-word;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
normal Hiç bir değişiklik yapmadan normal bir şekilde kullanımı sağlar.
break-word Break word ise normal kullanımın tam aksine divimizin sınırlarından dışarıya çıkmasını engeller.
İnital
İnherit

Tarayıcı Desteği
4.0 3.5 5.5 3.1 10.5
Posted on by Samed GÖZÜTOK 0

CSS3 transition-timing-function

transition-timing-function :

Oluşturacağımız geçişlere daha estetik geçişler sağlamak için kullanılan fonksiyonlardır.

Örnek

div {
  background: green;
  width: 200px;
  height: 20px;
  -webkit-transition-property: height; /* Safari */
   transition-property: height;
  -webkit-transition-duration: 3s; /* Safari */
   transition-duration: 3s;
   transition-timing-function: ease;
}
div:hover {
  height: 100px;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
ease Animasyonun yavaş başlayıp hızlanması ve yavaş bitmesi ile sonuçlanan animasyon tipidir.
linear Başlangıç ve Bitiş hızı aynı olan geçiş tipidir.
Ease-in Animasyonun yavaş başlamasını sağlayan geçiş tipi.
Ease-out Animasyonun yavaş bitmesini sağlayan geçiş tipi.
Ease-in-out Yavaş başlayıp yavaş biten cublic-bezier eş değer bir geçiş tipi.
Cublic-bezier Manuel olarak ayarladığımız geçiş tipidir.0 ve 1 arasında değerler alabilir.
İnital
İnherit

Tarayıcı Desteği
26.0
4.0-webkit		 16.0
4.0-moz		 10.0 6.1
3.1-webkit		 12.1
10.5-o
Posted on by Samed GÖZÜTOK 0

CSS3 transition-property

transition-property :

Uygulanan geçiş efektinin elemanın hangi özelliği üzerinden yapılacağını belirlemek için transition-property özelliğini kullanırız.

Not: Her zaman geçiş özelliğinin süresini belirtin yoksa varsayılan süre o olduğu için hiçbir geçiş göremezsiniz.

İpucu: Bir geçiş özelliği bir elementin üzerinin üzerindeyken genellikle kullanıcı elementin üzerine gelmeden hiçbir geçiş gözükmez.

Örnek

div {
  background: green;
  width: 200px;
  height: 20px;
  -webkit-transition-property: height; /* Safari */
   transition-property: height;
  -webkit-transition-duration: 3s; /* Safari */
   transition-duration: 3s;
}
div:hover {
  height: 100px;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
none Hiçbir geçiş efektinin gözükmemesini sağlar.
all Tüm özellikleri almış bir geçiş efekti uygulanır.
property Uygulanan geçiş efektinin elemanın hangi özelliği üzerinden yapılacağını belirlemek için transition-property özelliğini kullanırız.
İnital
İnherit

Tarayıcı Desteği
26.0
4.0-webkit		 16.0
4.0-moz		 10.0 6.1
3.1-webkit		 12.1
10.5-o
Posted on by Samed GÖZÜTOK 1