Javascript kullanarak bir CSS3 (webkit) animasyonu nasıl aktive edilir?

Gerçekten sıkışıp kaldım. Bir div tıklatarak etkinleştirmek için (aşağıda) oluşturduğum bir CSS animasyonu istiyorum. Bunu yapabileceğimi düşündüğüm tek yol bir onClick etkinliği oluşturmak için javascript kullanmaktı. Ancak, css dosyasında bulunan animasyonu nasıl çalıştırmayı/yeniden yapmayı bilmiyorum. Biri bana yardım edebilir mi?Javascript kullanarak bir CSS3 (webkit) animasyonu nasıl aktive edilir?

Bu, css dosyamdaki bir div'a tıklayarak çalıştırmak istediğim animasyon.

@-webkit-keyframes colorchange { 
0% { 
    background-color: red; 
    opacity: 1.0; 
    -webkit-transform: scale(1.0) rotate(0deg); 
} 
33% { 
    background-color: blue; 
    opacity: 0.75; 
    -webkit-transform: scale(1.1) rotate(-5deg); 
} 
67% { 
    background-color: green; 
    opacity: 0.5; 
    -webkit-transform: scale(1.1) rotate(5deg); 
} 
100% { 
    background-color: red; 
    opacity: 1.0; 
    -webkit-transform: scale(1.0) rotate(0deg); 
} 
}

Hatta javascript (index.html) ile aynı dosyada css koyarak çalıştı ve denemek ve tıklamada etkinleştirmek için aşağıdaki kodu kullanılır, ama hayır şans.

<script> 
function colorchange(test) 
{ 
test.style.webkitAnimationName = 'colorchange '; 
} 
</script>

:) Sen süresini kaçırıyorsun

kaynak

2010-12-05 user531192

yardımcı olur ve atamak adına sonunda bir boşluk var: Lütfen

function colorchange(test) 
{ 
    test.style.webkitAnimationName = 'colorchange'; // you had a trailing space here which does NOT get trimmed 
    test.style.webkitAnimationDuration = '4s'; 
}

Biraz daha Infos @-webkit-keyframes tarih:
http://webkit.org/blog/324/css-animation-2/

update

Bazı çalışma kodları.

<html> 
    <head> 
    <style> 
    @-webkit-keyframes colorchange { 
    0% { 
     background-color: red; 
     opacity: 1.0; 
     -webkit-transform: scale(1.0) rotate(0deg); 
    } 
    33% { 
     background-color: blue; 
     opacity: 0.75; 
     -webkit-transform: scale(1.1) rotate(-5deg); 
    } 
    67% { 
     background-color: green; 
     opacity: 0.5; 
     -webkit-transform: scale(1.1) rotate(5deg); 
    } 
    100% { 
     background-color: red; 
     opacity: 1.0; 
     -webkit-transform: scale(1.0) rotate(0deg); 
    } 
    } 
    </style> 

    <script> 
    function colorchange(e) { 
     if (e.style.webkitAnimationName !== 'colorchange') { 
      e.style.webkitAnimationName = 'colorchange'; 
      e.style.webkitAnimationDuration = '4s'; 

      // make sure to reset the name after 4 seconds, otherwise another call to colorchange wont have any effect 
      setTimeout(function() { 
       e.style.webkitAnimationName = ''; 
      }, 4000); 
     } 
    } 
    </script> 
    </head> 

    <body> 
     <div onclick="colorchange(this)">Hello World!</div> 
    </body> 
</html>

kaynak

2010-12-05 13:15:13

Bunun için teşekkürler, izleyen alanı görmedim. Ama hala problemim var. örneğin bunu yaparsam: test.style.height = "50px"; ancak bunu yaparak önceden tanımlamış olduğum özel bir animasyonu aramayı denediğimde animasyon ve çalışma olacak: test.style.webkitAnimationName = 'colorchange'; hiçbir şey işe yaramıyor. Bunun hakkında bir fikrin var mı? – user531192

Süreyi ayarladın mı? Bir olmadan çalışmayacak. Eşyaları yukarıdaki CSS ile test ettim ve işe yaradı. –

Evet Bir sürem var ve eğer bir css üzerine geldiğimde animasyon iyi çalışıyor. Ama javascript onclick'i kullanmayı denediğimde işe yaramam. (onclick çalışır). Onclick ile çalıştın mı? – user531192

Javascript kullanarak bir CSS3 (webkit) animasyonu nasıl aktive edilir?

cevap

İlgili konular