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

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>

tayfunerbilen
28 gün önce eklendi.
Github'da Düzenle
Önemli Başlıklar