CSS animation-play-state Özelliği

CSS3

Animasyonun oynatılıp oynatılmayacağını tanımlar. Eğer animasyon durdurulmuş ise yine de ilk karedeki değerler elemana uygulanır ve bekler.

Yapısı (Syntax)animation-play-state: paused | running

NOT

Bu özelliği genel olarak Javascript ile birlikte animasyonu durdurup devam ettirmek için kullanabiliriz.

Varsayılan Değer	running
JavaScript Yapısı	`object.style.animationPlayState="paused"`
Animasyon Özellikleri Uygulanabilir	Hayır (Daha fazla detay)

Değerler

Değer	Açıklama	Versiyon
running	Varsayılan değerdir. Bu özelliği yazmasanızda animasyon otomatik olarak oynatılacaktır.	CSS3
paused	Animasyon oynatılmaz ancak ilk karedeki değerler animasyon uygulanacak elemana uygulanır.	CSS3

Örnekler

Bir animasyon oluşturalım ancak durduralım, bu durumda ilk karedeki değerler elemana uygulanacak ve örneğimizde opacity değeri 0 olacaktır.

<div class="box"></div>

<style>
    .box {
        width: 60px;
        height: 60px;
        background: blue;
        position: relative;
        animation: boxAnimation 1s;
        animation-play-state: paused;
    }
    @keyframes boxAnimation {
        from {left: 0; opacity: 0}
        to {left: 200px; opacity: 1}
    }
</style>

Editörde Görüntüle

Javascript ile kullanımını merak ediyorsanız, işte size basit bir örnek.

<div id="box"></div>

<button id="playBtn">Oynat</button>
<button id="pauseBtn">Durdur</button>

<style>
    #box {
        width: 60px;
        height: 60px;
        background: blue;
        position: relative;
        animation: boxAnimation 5s;
        animation-play-state: paused;
    }
    @keyframes boxAnimation {
        from {left: 0}
        to {left: 400px}
    }
</style>

<script>
    var playBtn = document.getElementById('playBtn'),
        pauseBtn = document.getElementById('pauseBtn'),
        box = document.getElementById('box');
    
    playBtn.addEventListener('click', function(){
        box.style.animationPlayState = "running";
    });
    
    pauseBtn.addEventListener('click', function(){
        box.style.animationPlayState = "paused";
    });
</script>

Editörde Görüntüle

Tarayıcı Desteği

	Chrome	Firefox	Edge	Internet Explorer	Opera	Safari
`animation-play-state`	43 `-webkit-`	16 `-webkit-`	12 `-webkit-`	10	30 `-webkit-`	9 `-webkit-`

Destekliyor

Desteklemiyor

tayfunerbilen

1501 gün önce eklendi - 2441 kez görüntülendi.

Github'da Düzenle