درخواست یک استایل ساده آیکون

[amir6268]

سلام
من با کدهای animation زیاد آشنایی ندارم.
آیکون های پنل کاربری فیس نما وقتی موس را میبری روش یه حالت لرزش پیدا میکنه.
میخواستم ببینم کدش رو میزارید؟
اونایی که عضو نیستن یا ندیدن این فیلم 3 ثانیه ای رو از نوع آیکون ها گرفتم :
http://s6.picofile.com/file/8228749742/MOV_0006.mp4.html

[mohammad425]

میتونی از کتابخانه انیمیشن استفاده کنی: http://daneden.github.io/animate.css/

کد مربوط به اون قیمتی که میخواین:



<div class="swing">Mohammad</div>




@-webkit-keyframes swing {
20% {
-webkit-transform: rotate3d(0, 0, 1, 15deg);
transform: rotate3d(0, 0, 1, 15deg);
}


40% {
-webkit-transform: rotate3d(0, 0, 1, -10deg);
transform: rotate3d(0, 0, 1, -10deg);
}


60% {
-webkit-transform: rotate3d(0, 0, 1, 5deg);
transform: rotate3d(0, 0, 1, 5deg);
}


80% {
-webkit-transform: rotate3d(0, 0, 1, -5deg);
transform: rotate3d(0, 0, 1, -5deg);
}


to {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
}


@keyframes swing {
20% {
-webkit-transform: rotate3d(0, 0, 1, 15deg);
transform: rotate3d(0, 0, 1, 15deg);
}


40% {
-webkit-transform: rotate3d(0, 0, 1, -10deg);
transform: rotate3d(0, 0, 1, -10deg);
}


60% {
-webkit-transform: rotate3d(0, 0, 1, 5deg);
transform: rotate3d(0, 0, 1, 5deg);
}


80% {
-webkit-transform: rotate3d(0, 0, 1, -5deg);
transform: rotate3d(0, 0, 1, -5deg);
}


to {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
}


.swing:hover {
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-animation-name: swing;
animation-name: swing;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}