جهشی کردن آواتار کامنت‎ها

دمو :

1- آموزش گرد کردن آواتار کاربران در کامنت ها [لینک]

2- بعد از گرد کردن آواتار، وارد قالب ساختار اصلیتون بشید و کد زیر رو پیدا کنید :

<li class="avatar">

3- دقت کنید، کد بالا 2بار تو قالبتون هست و هر دوبار باید این روش رو انجام بدید.

4- بعد از کد بالا ، یه اینتر بزنید و کد زیر رو پیست کنید :

<div class="BestUser3">
<style type="text/css">
@keyframes smalljheleh{0%{transform:scale3d(1,1,1);
-moz-transform:scale3d(1,1,1);-o-transform:scale3d(1,1,1);
-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);
-khtml-transform:scale3d(1,1,1)}30%{transform:scale3d(1.25,0.75,1);
-moz-transform:scale3d(1.25,0.75,1);-o-transform:scale3d(1.25,0.75,1);
-webkit-transform:scale3d(1.25,0.75,1);-ms-transform:scale3d(1.25,0.75,1);
-khtml-transform:scale3d(1.25,0.75,1)}40%{transform:scale3d(0.75,1.25,1);
-moz-transform:scale3d(0.75,1.25,1);-o-transform:scale3d(0.75,1.25,1);
-webkit-transform:scale3d(0.75,1.25,1);-ms-transform:scale3d(0.75,1.25,1);
-khtml-transform:scale3d(0.75,1.25,1)}50%{transform:scale3d(1.15,0.85,1);
-moz-transform:scale3d(1.15,0.85,1);-o-transform:scale3d(1.15,0.85,1);
-webkit-transform:scale3d(1.15,0.85,1);-ms-transform:scale3d(1.15,0.85,1);
-khtml-transform:scale3d(1.15,0.85,1)}65%{transform:scale3d(.95,1.05,1);
-moz-transform:scale3d(.95,1.05,1);-o-transform:scale3d(.95,1.05,1);
-webkit-transform:scale3d(.95,1.05,1);-ms-transform:scale3d(.95,1.05,1);
-khtml-transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1);
-moz-transform:scale3d(1.05,.95,1);-o-transform:scale3d(1.05,.95,1);
-webkit-transform:scale3d(1.05,.95,1);-ms-transform:scale3d(1.05,.95,1);
-khtml-transform:scale3d(1.05,.95,1)}100%{transform:scale3d(1,1,1);
-moz-transform:scale3d(1,1,1);-o-transform:scale3d(1,1,1);
-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);
-khtml-transform:scale3d(1,1,1)}}@-moz-keyframes smalljheleh{0%{transform:scale3d(1,1,1);
-moz-transform:scale3d(1,1,1);-o-transform:scale3d(1,1,1);-webkit-transform:scale3d(1,1,1);
-ms-transform:scale3d(1,1,1);-khtml-transform:scale3d(1,1,1)}30%{transform:scale3d(1.25,0.75,1);
-moz-transform:scale3d(1.25,0.75,1);-o-transform:scale3d(1.25,0.75,1);
-webkit-transform:scale3d(1.25,0.75,1);-ms-transform:scale3d(1.25,0.75,1);
-khtml-transform:scale3d(1.25,0.75,1)}40%{transform:scale3d(0.75,1.25,1);
-moz-transform:scale3d(0.75,1.25,1);-o-transform:scale3d(0.75,1.25,1);
-webkit-transform:scale3d(0.75,1.25,1);-ms-transform:scale3d(0.75,1.25,1);
-khtml-transform:scale3d(0.75,1.25,1)}50%{transform:scale3d(1.15,0.85,1);
-moz-transform:scale3d(1.15,0.85,1);-o-transform:scale3d(1.15,0.85,1);
-webkit-transform:scale3d(1.15,0.85,1);-ms-transform:scale3d(1.15,0.85,1);
-khtml-transform:scale3d(1.15,0.85,1)}65%{transform:scale3d(.95,1.05,1);
-moz-transform:scale3d(.95,1.05,1);-o-transform:scale3d(.95,1.05,1);-webkit-transform:scale3d(.95,1.05,1);
-ms-transform:scale3d(.95,1.05,1);-khtml-transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1);
-moz-transform:scale3d(1.05,.95,1);-o-transform:scale3d(1.05,.95,1);
-webkit-transform:scale3d(1.05,.95,1);-ms-transform:scale3d(1.05,.95,1);
-khtml-transform:scale3d(1.05,.95,1)}100%{transform:scale3d(1,1,1);
-moz-transform:scale3d(1,1,1);-o-transform:scale3d(1,1,1);
-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);-khtml-transform:scale3d(1,1,1)}}
@-webkit-keyframes smalljheleh{0%{transform:scale3d(1,1,1);-moz-transform:scale3d(1,1,1);
-o-transform:scale3d(1,1,1);-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);
-khtml-transform:scale3d(1,1,1)}30%{transform:scale3d(1.25,0.75,1);
-moz-transform:scale3d(1.25,0.75,1);-o-transform:scale3d(1.25,0.75,1);
-webkit-transform:scale3d(1.25,0.75,1);-ms-transform:scale3d(1.25,0.75,1);
-khtml-transform:scale3d(1.25,0.75,1)}40%{transform:scale3d(0.75,1.25,1);
-moz-transform:scale3d(0.75,1.25,1);-o-transform:scale3d(0.75,1.25,1);-webkit-transform:scale3d(0.75,1.25,1);-ms-transform:scale3d(0.75,1.25,1);
-khtml-transform:scale3d(0.75,1.25,1)}50%{transform:scale3d(1.15,0.85,1);-moz-transform:scale3d(1.15,0.85,1);-o-transform:scale3d(1.15,0.85,1);
-webkit-transform:scale3d(1.15,0.85,1);-ms-transform:scale3d(1.15,0.85,1);-khtml-transform:scale3d(1.15,0.85,1)}65%{transform:scale3d(.95,1.05,1);
-moz-transform:scale3d(.95,1.05,1);-o-transform:scale3d(.95,1.05,1);-webkit-transform:scale3d(.95,1.05,1);-ms-transform:scale3d(.95,1.05,1);
-khtml-transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1);-moz-transform:scale3d(1.05,.95,1);-o-transform:scale3d(1.05,.95,1);
-webkit-transform:scale3d(1.05,.95,1);-ms-transform:scale3d(1.05,.95,1);-khtml-transform:scale3d(1.05,.95,1)}100%{transform:scale3d(1,1,1);
-moz-transform:scale3d(1,1,1);-o-transform:scale3d(1,1,1);-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);-khtml-transform:scale3d(1,1,1)}}
.BestUser3 Img{    -moz-filter: grayscale(100%);    -o-filter: grayscale(100%);    
-webkit-filter: grayscale(100%);    -ms-filter: grayscale(100%);    -khtml-filter: grayscale(100%);Margin:0px 11px 6px 5px;Border:2px Solid 
#ccc;Border-Radius:1000px;Transition-Duration:0.9s;    transition: all 2s ease;}
.BestUser3 Img:hover{     filter: none;    -moz-filter: grayscale(0);    -o-filter: grayscale(0);    -webkit-filter: grayscale(0);    
-ms-filter: grayscale(0);    -khtml-filter: grayscale(0);    animation-name: smalljheleh;    animation-duration: 1.5s;    animation-fill-mode: both;    
transition: all 0.5s ease;}
</style>

دسته: {کدنویس}