Etiket: duration

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 transition-duration

transition-duration :

Geçiş efektlerini uygularken verdiğimiz efektin ne kadar süre ile devam edeceğini belirlemek için kullanılır.

Örnek

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

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
Time Geçiş efektinin ne kadar saniye veya milisaniye devam edeceğini belirtir. Varsayılan süre 0s olduğu için süre ayarı yapılmazsa hiçbir geçiş gözükmez.
İ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