Etiket: animation

CSS3 animation-timing-function

animation-timing-function :

Animasyonda bir hız eğrisi belirler.

Ö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-timing-function: linear; /* Chrome, Safari, Opera */
    animation-timing-function: linear;
}
/* 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
linear Animasyon baştan sona aynı hıza sahiptir.
ease Yavaş bir başlangıç ardından hızlanır ve yine yavaş bir şekilde sonlanır.
animation-timing-function Animasyonda bir hız eğrisi belirler.
ease-in Sadece başlangıç yavaştır.
ease-out Sadece bitiş yavaşlar.
ease-in-out Yavaş bir başlangıç hızlanmadan normal bir akış ardından yavaş bir son.(Yine çevirmeye bakalım)
cubic-bezier(n,n,n,n) Hızlanma ve yavaşlama noktalarını belirlersiniz.
İ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-play-state

animation-play-state :

Animasyonu çalışıp durmasını sağlar. İstediğiniz durumda animasyonu durdurmanızıda sağlar.

Ö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-play-state: paused; /* Chrome, Safari, Opera */
    animation-play-state: paused;
}
/* 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
paused Animasyonu durdurur.
running Animasyonu çalıştırı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 1

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 @keyframes

@keyframes :

Animasyon kuralıdır. Animasyonun adımlarını girerek oluşturursunuz. Tıpkı çizgifilm animasyonlarının kare kare oluşturulması gibidir. Bu adımlar % yüzdelelerle ifade edilir. %0 ‘ dan 100% kadar adımları siz belirlersiniz. En iyi tarayıcı desteğini sağlamanız için %0 başlangıç değeri ve 100% bitiş değeri girilmelidir.

Örnek

.keyframes {
   width: 200px;
   height: 200px;
   background: red;
   position :relative;
   -webkit-animation: mymove 6s infinite; /* Chrome, Safari, Opera */ 
   animation: mymove 6s infinite;
   text-align: center;
   color: white;
}
/* Chrome, Safari, Opera */ 
@-webkit-keyframes mymove {
    0%   {left: 0px;}
    25%  {left: 500px;}
    75%  {left: 50px}
    100% {left: 200px;}
}

/* Standard syntax */
@keyframes mymove {
    0%   {left: 0px;}
    25%  {left: 500px;}
    75%  {left: 50px}
    100% {left: 100px;}
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
animationname Bu kısma bir animasyon ismi girilmelidir.
Keyframes-selector %0-100% arası adımlar girilerek oluşturulur. %0 ve 100% değerlerinin girilmesi önerilir.
Css-style Bir veya daha fazla değişecek css özelliği.

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