@keyframes shakeTopx {
0%,
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
}
5% {
-webkit-transform: rotate(2deg);
transform: rotate(2deg);
}
10%,
20%,
30% {
-webkit-transform: rotate(-4deg);
transform: rotate(-4deg);
}
15%,
25%,
35% {
-webkit-transform: rotate(4deg);
transform: rotate(4deg);
}
40% {
-webkit-transform: rotate(-2deg);
transform: rotate(-2deg);
}
45% {
-webkit-transform: rotate(2deg);
transform: rotate(2deg);
}
50% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
CSS3 抖动动画
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- 一.设置3D场景 perspective:800 //浏览器到物体的距离(像素)perspective...
- 在简书里面,每一篇文章底部都有喜欢这个按钮,如同上图的这个效果,体验非常好,究竟是怎么做的呢?首先,作为前端攻城狮...