Etiket: direction

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

CSS flex-direction

flex-direction :

Kapsayıcı eleman içindeki esnek kutuların sıralama yönünü belirler.

Not: elementin flex özelliği yoksa ,flex-direction etkili olmaz.

Örnek

.flex{
    width: 200px;
    height: 200px;
    display: -webkit-flex; /* Safari */
    -webkit-flex-direction: row-reverse; /* Safari 6.1+ */
    display: flex;
    flex-direction: row-reverse;
    background: red;
    color: white;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
row Esnek kutuları soldan sağa sıralar.
row-reverse Esnek kutuları sağdan sola sıralar.
column Esnek kutuları kolon olarak yukarıdan aşağı sıralar.
Column-reverse Esnek kutuları row-reverse gibi ama alttan yukarı sıralar.
İnital
İnherit

Tarayıcı Desteği
29.0
21.0-webkit		 28.0
18.0-moz		 11.0
10.0-ms-		 6.1-webkit 12.10
Posted on by Samed GÖZÜTOK 0

CSS direction

direction :

Metinin yazma yönünü belirlemek için kullanılır.

Örnek

.direction {
  direction: rtl;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
ltr Yazma yönünün soldan sağa olduğunu belirtmek için kullanılır.
rtl Yazma yönünün sağdan sola olduğunu belirtmek için kullanılır.
İnital
İnherit

Tarayıcı Desteği
2.0 1.0 5.5 1.3 9.2
Posted on by Samed GÖZÜTOK 0