小铃铛shake动画,css3代码(不会截gif图,sorry,效果还是不错的)
.shake{
//不同浏览器 倾斜
//-ms-transform:rotate(30deg); /* IE 9 */
//-moz-transform:rotate(30deg); /* Firefox */
//-webkit-transform:rotate(30deg); /* Safari and Chrome */
//-o-transform:rotate(30deg); /* Opera */
//抖动
-webkit-animation: shake 2s ease infinite;
animation: shake 2s ease infinite;
transform-origin-x: 50%;
transform-origin-y: 0;
transform-origin-z: initial;
}
@-webkit-keyframes shake {
0% {
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
}
2% {
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
4% {
-webkit-transform: rotate(-18deg);
transform: rotate(-18deg);
}
6% {
-webkit-transform: rotate(18deg);
transform: rotate(18deg);
}
8% {
-webkit-transform: rotate(-22deg);
transform: rotate(-22deg);
}
10% {
-webkit-transform: rotate(22deg);
transform: rotate(22deg);
}
12% {
-webkit-transform: rotate(-18deg);
transform: rotate(-18deg);
}
14% {
-webkit-transform: rotate(18deg);
transform: rotate(18deg);
}
16% {
-webkit-transform: rotate(-12deg);
transform: rotate(-12deg);
}
18% {
-webkit-transform: rotate(12deg);
transform: rotate(12deg);
}
20%, 100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes shake {
0% {
-webkit-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
transform: rotate(-15deg);
}
2% {
-webkit-transform: rotate(15deg);
-ms-transform: rotate(15deg);
transform: rotate(15deg);
}
4% {
-webkit-transform: rotate(-18deg);
-ms-transform: rotate(-18deg);
transform: rotate(-18deg);
}
6% {
-webkit-transform: rotate(18deg);
-ms-transform: rotate(18deg);
transform: rotate(18deg);
}
8% {
-webkit-transform: rotate(-22deg);
-ms-transform: rotate(-22deg);
transform: rotate(-22deg);
}
10% {
-webkit-transform: rotate(22deg);
-ms-transform: rotate(22deg);
transform: rotate(22deg);
}
12% {
-webkit-transform: rotate(-18deg);
-ms-transform: rotate(-18deg);
transform: rotate(-18deg);
}
14% {
-webkit-transform: rotate(18deg);
-ms-transform: rotate(18deg);
transform: rotate(18deg);
}
16% {
-webkit-transform: rotate(-12deg);
-ms-transform: rotate(-12deg);
transform: rotate(-12deg);
}
18% {
-webkit-transform: rotate(12deg);
-ms-transform: rotate(12deg);
transform: rotate(12deg);
}
20%, 100% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
}