v2.1.1
Giriş yap

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>

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>

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
22 gün önce eklendi.
Github'da Düzenle
Önceki animation-name Sonraki animation-timing-function