CSS3 animation-play-state Özelliği

CSS3 animation-play-state

Css ile oluşturulan animasyonun durdurulup devam ettirilmesini sağlayan özellik animation-play-state özelliğidir.

Örnek:

Aşağıda verilen örnekte animasyona running değeri verildiği için animasyon çalışacaktır.

div { animation-play-state: running; -webkit-animation-play-state: running; /* Chrome, Safari, Opera */ }

CSS3 animation-play-state nedir nasıl kullanılır

Oluşturulan animasyonun devam ettirmek ya da durdurulmak istenildiğinde animation-play-state özelliği kullanılır. Tavsiye edilen ise kontrolü javascript ile buttonlarla kontrolü sağlamaktır.
CSS animation-play-state CSS animation-play-state özellikleri  
Varsayılan Değer: running  
Kalıtsallık: yok  
Animasyon Özelliği: yok  
Versiyon: CSS3  
JavaScript animation-play-state: object.style.animationPlayState="paused"

CSS3 animation-play-state Tarayıcı Desteği

The numbers in the table specify the first browser version that fully supports the property. Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.
CSS Kodu:
animation-play-state 43.0
4.0 -webkit-		 10.0 16.0
5.0 -moz-		 9.0
4.0 -webkit-		 30.0
15.0 -webkit-
12.0 -o-

CSS3 animation-play-state Değerleri

animation-play-state:paused|running|initial|inherit;

CSS3 animation-play-state özelliği değerleri

CSS animation-play-state değerleri CSS animation-play-state değerleri tanımları CSS Örnek Uygulamalar
paused Paused değeri animasyonun durmasını sağlayan değerdir.
running Varsayılan başlangıç değeri olan "running" değeri animasyonu devam ettirir..
initial Bu özellliğin başlangıç değerine dönüşmesini sağlar.
inherit Soybağından aldığı değeri taşır.

Yorumlar

Yorum Gönder

Popüler yayınlar

HTML Metin Biçimlendirme Etiketleri

Resim
« Önceki Ders Sonraki Ders » Metin Biçimlendirme Örnek <p>Bu bir <b>kalın</b> metin</p> <p>Bu bir <i>italik</i> metin</p> <p>Bu bir <em>vurgulanmış italik</em> metin</p> <p>Bu bir <small>daha küçük puntolu</small> metin</p> <p>Bu bir <strong>önemli</strong> metin</p> <p>Bu bir <sub>altsimge</sub> metni</p> <p>Bu bir <sup>üstsimge</sup> metni</p> <p>Bu bir <ins>yeni eklenmiş</ins> metin</p> <p>Bu bir <del>içerikten silinmiş, çıkarılmış</del> metin</p> <p>Bu bir <mark>öne çıkarılmış</mark> metin</p> Kendiniz deneyin » HTML Biçimlendirme Elementleri Bir önceki derste HTML style özelliği kullanarak HTML stil atama hakkında bilgi sahibi olduk. HTML özel anlamları ve kullanım
Devamı

HTML hr Etiketi

<hr> Etiketi Örnek İçerikte konuyla ilgili bir değişikliği ifade etmek için <hr> etiketi kullanın: < h1 > HTML < /h1 > < p > HTML web sayfalarını tanımlayan bir dildir. < /p > < hr/ > < h1 > CSS < /h1 > < p > CSS HTML öğelerinin görsel ayarlarını tanımlar. < /p > Kendiniz deneyin » htmlvecssegitimi.blogspot.com Kodu Çalıştır butonuna tıklayarak HTML belgesini Sonuç Ekranı'nda görüntüleyebilirsiniz. KODU ÇALIŞTIR SAYFAYI TEMİZLE SAYFAYI YENİLE KAYNAK KODLARI SONUÇ EKRANI <!DOCTYPE html><html> <body> <h1>HTML</h1> <p>HTML web sayfalarını tanımlayan bir dildir.</p> <hr /> <h1>CSS</h1> <p>CSS HTML öğelerinin görsel ayarlarını tanımlar.</p> </body> </html> HTML
Devamı

HTML em Etiketi

<em> Etiketi Örnek <em> etiketi ile metni vurgulama: < em > Vurgulanmış yazı < /em > Kendiniz deneyin » htmlvecssegitimi.blogspot.com Kodu Çalıştır butonuna tıklayarak HTML belgesini Sonuç Ekranı'nda görüntüleyebilirsiniz. KODU ÇALIŞTIR SAYFAYI TEMİZLE SAYFAYI YENİLE KAYNAK KODLARI SONUÇ EKRANI <!DOCTYPE html><html> <body> <em>Vurgulanmış metin</em> <br /> <strong>Önemli metin</strong> <br /> <code>Bilgisayar kodları</code> <br /> <samp>Bir bilgisayar programının örnek çıktısı</samp> <br /> <kbd>Klavye girişi</kbd> <br /> <var>Değişkenler (Variables)</var> </body> </html> HTML ve CSS Dersleri © 2015 HTMLveCSSegitimi.blogspot.com <em> Tanımı ve Kull
Devamı

CSS justify-content Özelliği

CSS justify-content Css justify-content özelliğini esnek kutu modelinde kapsayıcı kutunun elemanlarının genişliği kabı doldurmadığında değişik hizalama seçenekleri sunar. Örnek: Bu örnekte bir esnek kutu içerisinde genişlikleri kabı doldurmayan elemanlar vardır.Kapsayici kutuya justify-content özelliğinin space-between değeri verildiğindeki etkisini görmek için aşağıdaki kendiniz deneyin tuşuna tıklayınız. #anakutu { width: 300px; height: 250px; border: 2px solid black; display: -webkit-flex; -webkit-justify-content: space-between; display: flex; justify-content: space-between; } #anakutu div { width: 50px; height: 50px; } Kendiniz deneyin » CSS justify-content nedir nasıl kullanılır Esnek kutu içerisindeki elemanlar yatay eksende tüm genişliği kaplamadığı zaman justify-content özelliği elemanları hizalamak için kullanılabilir. CSS justify-content CSS justify-content özellikleri
Devamı

HTML pre Etiketi

<pre> Etiketi Örnek Ön biçimlendirilmiş metin: < pre >  pre elementi içerisindeki metin belli  bir punto büyüklüğü ve genişliğinde görüntülenir,       hem boşlukları        hem de satır sonlarını  yazı içerisinde korur. < /pre > Kendiniz deneyin » htmlvecssegitimi.blogspot.com Kodu Çalıştır butonuna tıklayarak HTML belgesini Sonuç Ekranı'nda görüntüleyebilirsiniz. KODU ÇALIŞTIR SAYFAYI TEMİZLE SAYFAYI YENİLE KAYNAK KODLARI SONUÇ EKRANI <!DOCTYPE html><html> <body> <pre><br />pre elementi içerisindeki metin belli<br /> bir punto büyüklüğü ve genişliğinde görüntülenir, hem boşlukları <br />hem <br />de satır<br />sonlarını<br />yazı içerisinde korur.<br /> </pre> </body> </html> HTML ve CSS Dersleri © 2015 HTMLveCSSegitimi.blogs
Devamı

HTML table Etiketi

<table> Etiketi Örnek Basit bir HTML tablosu: < table >    < tr >      < th > Ay < /th >      < th > Harcamalar < /th >    < /tr >    < tr >      < td > Mart < /td >      < td > 620 TL < /td >    < /tr >    < tr >      < td > Nisan < /td >      < td > 590 TL < /td >    < /tr > < /table > Kendiniz deneyin » htmlvecssegitimi.blogspot.com Kodu Çalıştır butonuna tıklayarak HTML belgesini Sonuç Ekranı'nda görüntüleyebilirsiniz. KODU ÇALIŞTIR SAYFAYI TEMİZLE SAYFAYI YENİLE KAYNAK KODLARI SONUÇ EKRANI <!DOCTYPE html><html> <head> <style> table, th, td { border: 1px solid red; } </style></head> <body> <table> <tr> <th>Ay</th> <th>Harcamalar</th> </tr> <
Devamı

CSS align-items özelliği

CSS align-items özelliği Css align-content özelliği ile bir HTML elemanının içerisindeki alt elemanlarını hizalama ve konumlandırma işlemleri için kullanabiliriz Örnek: Align-items özelliğini kullanarak esnek kutu modülü ("flex") uygulanan bir kapsayıcı div içerisindeki elemanların konumlarına center değerini uygulayalım ! div { width: 220px; height: 350px; border: 2px solid black; display: -webkit-flex; -webkit-align-items: center; display: flex; align-items: center; } Kendiniz deneyin » CSS align-items nedir nasıl kullanılır Flex ile (esnek kutu modeli) ile yapılandırılmış bir div kutusundaki elemanları hizalamak için kullanılır. CSS align-items CSS align-items özellikleri &nbsp Varsayılan Değer: stretch   Kalıtsallık: yok   Animasyon Özelliği: yok   Ver
Devamı

HTML menu Etiketi

<menu> Etiketi Örnek Basit bir düzenleyici için iki menü butonu içeren bir içerik menüsü: < menu >   < li >     < button type= "menu" value= "Dosya" menu= "dosya-menu">     < menu type= "context" id= "dosya-menu">       < menuitem label= "Yeni" onclick= "newFile()">        < menuitem   label= "Kaydet"   onclick= "saveFile()">      < /menu >   < /li >    < li >      < button   type= "menu"   value= "Edit" menu= "edit-menu">      < menu   type= "context"   id= "edit-menu">        < menuitem   label= "Kes"  onclick= "cutEdit()">        < menuitem   label= "Kopyala"   onclick= "copyEdit()">        < menuitem   label= "Yapıştır"   onclick= "pasteEdit()">      < /menu >    < /li > < /
Devamı

CSS flex-basis Özelliği

CSS flex-basis Css flex-basis :Esnek kutu modelinde optimum boyutunu belirlemek için kullanılır. Eğer yeterli genişlik var ise esnek kutu verilen değer boyutunda olacaktır. Örnek: Bu örnekte anaka kutu içerisindeki bütün elemanlara başlangıç uzunluğu 40px verilmiştir.2. sıradaki elemanının genişliğini ise 90px olarak değiştirdik. #anakutu div { -webkit-flex-grow: 0; -webkit-flex-shrink: 0; -webkit-flex-basis: 40px; flex-grow: 0; flex-shrink: 0; flex-basis: 40px; } #anakutu div:nth-of-type(2) { -webkit-flex-basis: 90px; flex-basis: 90px; } Kendiniz deneyin » CSS flex-basis nedir nasıl kullanılır Flex-basis özelliği sayısal olarak uzunluk yani genişlik tanımlamıza yarar. CSS flex-basis CSS flex-basis özellikleri   Varsayılan Değer: auto   Kalıtsallık: yok   Animasyon Özelliği: var   Versiyon: CSS3  
Devamı

CSS content Özelliği

CSS content Css content özelliğini sayfaya seçilen elemandan önce veya sonrasında içerik eklemek için kullanılabilir. Örnek: Bu örnekte bir linkin title değerini linkten önce yazmak için content özelliği uygulanmıştır. a:before { content: " (" attr(title) ")"; color: red; font-size: 1.1em; } Kendiniz deneyin » CSS content nedir nasıl kullanılır Css content ile seçilen html elemanından önce veya sonrasında bir url ,resim, içerik, tırnak işareti gibi elemanlar eklenebilir. CSS content CSS content özellikleri   Varsayılan Değer: normal   Kalıtsallık: yok   Animasyon Özelliği: yok   Versiyon: CSS2   JavaScript content: Açıklama Oynat CSS content Tarayıcı Desteği Tablodaki sayılar özelliği tam destekleyen ilk tarayıcı sürümlerini gösterir. CSS Kodu:
Devamı