https://tympanus.net/Tutorials/Circl...ts/index3.html

https://tympanus.net/Tutorials/Circl...ts/index4.html

Geçiş dediğiniz keyframe animation ile fade tadında efektler vermek sanırım? Çünkü zaten :hover tanımını yapmışsınız.

Şöyle ki;

@keyframes efektAdiniz{
from{
opacity:0;
}to{
opacity:1;
}
}

Gibi bir efekt oluşturduktan sonra;

.logo:hover{
animation: efektAdiniz 3s forwards; /* 3s, 3 saniye anlamına gelmektedir. */
}

Efekti logonuzun bulunduğu classa özellik olarak ekleyebilirsiniz... (Şu sayfaya bakmanızda fayda var; https://www.w3schools.com/css/css3_animations.asp)