این افکت رو به دو شکل هست که یکی برای تمام تصاویر صفحه عمل کنه و برای اون یکی هم کلاس اضافه کردم که کاربر بتونه خودش جایی که میخواد ازش استفاده کنه . 
<style>
@keyframes azcenter-ir{
from{opacity:1;}
to{opacity:0.3;}
}
@-moz-keyframes azcenter-ir{
from{opacity:1;}
to{opacity:0.3;}
}
@-webkit-keyframes azcenter-ir{
from{opacity:1;}
to{opacity:0.3;}
}
@-o-keyframes azcenter-ir{
from{opacity:1;}
to{opacity:0.3;}
}
img:hover{
animation: azcenter-ir 0.3s ease-in-out infinite alternate;
-moz-animation: azcenter-ir 0.3s ease-in-out infinite alternate;
-o-animation: azcenter-ir 0.3s ease-in-out infinite alternate;
-webkit-animation: azcenter-ir 0.3s ease-in-out infinite alternate;
}
</style>
استایل + کلاس برای استفاده در جای خاص
<style>
@keyframes azcenter-ir{
from{opacity:1;}
to{opacity:0.3;}
}
@-moz-keyframes azcenter-ir{
from{opacity:1;}
to{opacity:0.3;}
}
@-webkit-keyframes azcenter-ir{
from{opacity:1;}
to{opacity:0.3;}
}
@-o-keyframes azcenter-ir{
from{opacity:1;}
to{opacity:0.3;}
}
.effect-img-zntboys img:hover{
animation: azcenter-ir 0.3s ease-in-out infinite alternate;
-moz-animation: azcenter-ir 0.3s ease-in-out infinite alternate;
-o-animation: azcenter-ir 0.3s ease-in-out infinite alternate;
-webkit-animation: azcenter-ir 0.3s ease-in-out infinite alternate;
}
</style>
<div class="effect-img-zntboys">
</div>
اره میشه
استایل بالای < /head >
