ایجاد انیمیشن هنگام عدم هاور

باسلام

از ::hover برای ایجاد انیمیشن هنگام هاور کردن المنت استفاده میکنیم ولی وقتی هاور رو از المنت برداریم بطور ناکهانی ناپدید میشه 

چیکار کنیم که موقغ برداشتن هاور هم با انیمیشن نمایشش غیرفعال شه

مثال:

.element{

opacity:0;

visibility:hidden;

}

.element:hover{

opacity:1;

visibility:visible

}