function animasyon() {document.getElementById('test').className = 'animasyonlu-btn';}.animasyonlu-btn {
animation:onethatgetbigger 5s;
animation-fill-mode: forwards;
}
document.getElementById("test").style.color = "red";
.style'yi denedim. Olmadı.
Yapmak istediğiniz şeyi daha açıkça ifade edip kodunuzu atarsanız daha iyi yardımcı olabilirim.
Bir butonun üstüne basıldığı zaman "onethatgetbigger" animasyonu çalışması, ve butonun öyle kalması lazım.
@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;
}function animasyon() {document.getElementById('test').className = 'animasyonlu-btn';}.animasyonlu-btn {
animation:onethatgetbigger 5s;
animation-fill-mode: forwards;
}Bu da işe yaramadı maalesef. (fonksiyonu çalıştırmak için onclick kullanıyorum)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:function animasyon() {document.getElementById('test').className = 'animasyonlu-btn';}
Fonksiyonumuz bu şekilde olacak. Burada "animasyonlu-btn" adlı bir class veriyoruz butona tıklanınca.
CSS:.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.
Hocam verdim zaten.
<img id="test" class="board1" onclick="animasyon()"> şeklinde olmalı.
