Çözüldü JavaScript ile CSS animasyonu çalıştırma

Ecmel dedi:

DOM ile yapabilirsiniz. JS tarafında özellikleri .style ile verirsiniz.
Bunu fonksiyona da ayarlayabilirsiniz.

Örnek:
document.getElementById("test").style.color = "red";

Genişletmek için tıkla...

William Crusader dedi:

.style'yi denedim. Olmadı.

Genişletmek için tıkla...

Ecmel dedi:

Yapmak istediğiniz şeyi daha açıkça ifade edip kodunuzu atarsanız daha iyi yardımcı olabilirim.

Genişletmek için tıkla...

@keyframes onethatgetbigger{
   from{width: 350px; height: 350px;}
   to{width: 390px; height: 390px;}
}

@keyframes onethatgetsmaller{
   from{width: 350px; height: 350px; opacity: 1;}
   to{width: 300px; height: 300px; opacity: 0.5;}
}

text{
   font-family: 'Comfortaa', cursive;
   font-size: 50px;
   color: #3f48cc;
}

.board1{
   width: 350px;
   height: 350px;
   position: absolute;
   top: 150px;
   left: 200px;
   cursor: pointer;
}

.board2{
   width: 350px;
   height: 350px;
   position: absolute;
   top: 150px;
   left: 800px;
   transition: all 2s;
}

.clock1{
   width: 130px;
   height: 60px;
   position: absolute;
   top: 92px;
   left: 310px;
   transition: all 2s;
}

.clock2{
   width: 130px;
   height: 60px;
   position: absolute;
   top: 92px;
   left: 910px;
   transition: all 2s;
}

Ecmel dedi:

JS tarafında butona tıklanınca class verdirmek mantıklı geldi bana.

Öncelikle o butona bir tane id verelim. Bu id "test" olsun. O butona onclick'te fonksiyonun adını veriniz. Ben mesela animasyon olarak verdim. (Sosyal sağ olsun bana o kodu yazdırmıyor. Yazdığım zaman mesajı gönderemiyorum, hata veriyor. Onla uğraşırken beklettim biraz. )

JavaScript:Panoya kopyala

function animasyon() {document.getElementById('test').className = 'animasyonlu-btn';}

Fonksiyonumuz bu şekilde olacak. Burada "animasyonlu-btn" adlı bir class veriyoruz butona tıklanınca.

CSS:Panoya kopyala

.animasyonlu-btn {
  animation:onethatgetbigger 5s;
  animation-fill-mode: forwards;
}

Buradaki "onethatgetbigger" verdiğin animasyonun adı, yanındaki de kaç saniye süreceği değeri.

Bu şekilde sorunun çözülecektir.

Genişletmek için tıkla...

Ecmel dedi:

@William Crusader butona tıklandığı zaman neyi büyütmek istiyorsanız ona id verin. Büyütmek istediğiniz şey bir img tagıysa id'yi img tagına verin.

Genişletmek için tıkla...