css | scss iç içe transition kullanım sorunu
merhaba arkadaşlar,
<a href="#" class="btn btn-outline-warning px-2">Profili görüntüle <i class="fa-solid fa-angles-right ms-1"></i></a>
a {
align-self: flex-end;
padding: 3px 8px;
font-family: 'Mulish', sans-serif;
font-size: 15px;
box-shadow: $shadow-sm;
transition: .5s all;
i {
transition: .4s all;
}
&:hover {
color: $white;
i {
transform: rotateX(180deg) rotateY(180deg);
}
}
}
şu şekilde bir yapım var. "<b>a</b>" etiketi hover olunca a etiketinin rengini değiştiriyorum. geçişli olması için transition kullandım. a hover olunca da içerisinde ki "<b>i</b>" etiketinede transform işlemi uyguluyorum. i etiketinin kendisine de transition verince bir gecikme oluyor a etiketinde de transition olduğu için bunu benmi yanlış kullanıyorum yoksa bir çözümü var mı?
normalde test edip yanıt veriyorum ama, css dalınca çıkamıyorum : ) animation kullansan olmuyor mu? bana başlangıç sürelerinin çakışması gibi bir problem yaşıyormuşsun gibi geldi. animation da ne zaman animasyonun başlayacağını seçebiliyorsun.
a için delay'ı 0 ayarlayıp duration'u 0.5
b için delay'ı 0.5 ayarlayıp duration'u 0.4 yapabilirsin.
böylece a tetiklendiğide hemen çalışır ve çalışma süresi sona erdiği anda b çalışır.
animaton'un parametrelerini karştırmadan yazmak için bu siteden https://webcode.tools/generators/css/keyframe-animation faydalanıyorum. lazım olursa buradan da faydalanmanı tavsiye ederim.