0
Orijinal boyutuna geri dönerken parent-round-div'u canlandırmak istiyorum. Mevcut animasyonunu bitirdikten sonra animasyon yapmak mümkün mü? Ben kopyalayıp Harry cevap yapıştırılan,Animasyon kendi sırasını bitirdiğinde öğeyi nasıl canlandırabilirim
.parent-round-div{
position: absolute;
border: 2px solid black;
border-radius: 50%;
width: 70px;
height: 70px;
background: green;
-webkit-animation-name: sizeAnimate;
-webkit-animation-duration: 2s ;
-webkit-animation-iteration-count: infinite;
animation-name: sizeAnimate;
animation-duration: 2s;
animation-iteration-count: infinite;
}
.child-round-div{
margin:10%;
position:relative;
top: 40%;
left: 40%;
transform: translate(-50%, -50%);
border: 1px solid black;
border-radius: 50%;
height: 70px;
width:70px;
font-size: 50px;
text-align: center;
background: red;
}
@-webkit-keyframes sizeAnimate{
from{
width: 70px;
height: 70px;
}
to{
width: 80px;
height: 80px;
}
}
@keyframes sizeAnimate{
from{
width:70px;
height: 70px;
}
to{
width: 80px;
height: 80px;
}
}
<div class = "parent-round-div">
<div class="child-round-div">
A
</div>
</div>
İlk etki ne zaman gerçekleşir? Bir vurgun mu yoksa tıkla? İkinci animasyon ne zaman gerçekleşir? Değilse - sadece bir animasyon gecikmesi ekleyebilirsiniz http://www.w3schools.com/cssref/css3_pr_animation-delay.asp –
Sayfa yüklendiğinde animasyon gerçekleşir ve animasyondan sonra animasyon başka bir animasyon yuvarlak div. –
@AbzRockers Soru çok açık değil. İkinci animasyon ne zaman yapılmalı ve nasıl tetiklenmeli? İlk animasyon tamamlandıktan hemen sonra otomatik olarak tetiklenmeli mi? Biraz gecikmeden sonra tetiklenmeli mi? Kullanıcı etkileşimi sonrasında tetiklenmeli mi? Ne zaman? – Harry