ویژه [xf-xyz]ایجاد انیمیشن آواتارها

[nima]

1- بریدن
برای ایجاد چنین انیمیشینی که بعد از کلیک کردن روی اواتار ایجاد میشه کد زیر رو درextra.lessقرار بدید.
برای بقیه حالت ها هم فقط کدشون متفاوته.
[HIDESHOWTOGROUPS=12,4,13,3,10,11,6,5,7]

@keyframes magic {
  0% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
  20% {
    clip-path: polygon(28% 0, 73% 0, 100% 100%, 0% 100%);
  }
  40% {
    clip-path: polygon(0 0, 100% 72%, 100% 100%, 0 35%);
  }
  60% {
    clip-path: polygon(50% 0, 50% 0, 100% 100%, 0% 100%);
  }
  80% {
    clip-path: polygon(0 70%, 100% 0, 100% 32%, 0 100%);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
}

.awardsPostbit-userAward:hover,  .avatar:hover, .avatar img:hover, .img.s:hover {
  animation: magic 4.72s infinite;

}

[/HIDESHOWTOGROUPS]

 

[nima]

2- تپیدن

[HIDESHOWTOGROUPS=12,13,3,10,11,6,5,7]

.awardsPostbit-userAward:hover,  .avatar:hover, .avatar img:hover, .img.s:hover {
  animation: pulsate 1s infinite;
 
}
@keyframes pulsate {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}
@-webkit-keyframes pulsate {
  0% { -webkit-transform: scale(1); }
  50% { -webkit-transform: scale(1.3); }
  100% { -webkit-transform: scale(1); }
}
@-moz-keyframes pulsate {
  0% { -moz-transform: scale(1); }
  50% { -moz-transform: scale(1.3); }
  100% { -moz-transform: scale(1); } 
}
@-ms-keyframes pulsate {
  0% { -ms-transform: scale(1); }
  50% { -ms-transform: scale(1.3); }
  100% { -ms-transform: scale(1); } 
}
@-o-keyframes pulsate {
  0% { -o-transform: scale(1); }
  50% { -o-transform: scale(1.3); }
  100% { -o-transform: scale(1); } 
}

[/HIDESHOWTOGROUPS]

 

[nima]

3- پریدن

[HIDESHOWTOGROUPS=12,13,3,10,11,6,5,7]

.awardsPostbit-userAward:hover,  .avatar:hover, .avatar img:hover, .img.s:hover {
  animation: bounc 1s infinite;
 
}
@keyframes bounc {
  50% {
    transform: translateY(-50%);
  }
}

[/HIDESHOWTOGROUPS]