css3 抖动效果

最新推荐文章于 2022-07-21 15:43:24 发布

曲小强

最新推荐文章于 2022-07-21 15:43:24 发布

阅读量427

点赞数 1

CC 4.0 BY-SA版权

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/quhongqiang/article/details/108601605

CSS 专栏收录该内容

40 篇文章

订阅专栏

.shaky {
        -webkit-animation-name: shaky-slow;
        -ms-animation-name: shaky-slow;
        animation-name: shaky-slow;
        -webkit-animation-duration: 0.5s;
        -ms-animation-duration: 0.5s;
        animation-duration: 0.5s;
        -webkit-animation-iteration-count: 2;
        -ms-animation-iteration-count: 2;
        animation-iteration-count: 2;
        -webkit-animation-timing-function: ease-in-out;
        -ms-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        -webkit-animation-play-state: running;
        -ms-animation-play-state: running;
        animation-play-state: running;
    }
@-webkit-keyframes shaky-slow {
	30% {
		-webkit-transform: translateY(10px);
	}
	60% {
	    -webkit-transform: translateY(-10px);
	}
	80% {
	          -webkit-transform: translateY(10px);
	      }
	100% {
	          -webkit-transform: translateY(0);
	      }
	80% {
	          -webkit-transform: translateY(10px);
	      }
	60% {
	          -webkit-transform: translateY(-10px);
	      }
	30% {
	          -webkit-transform: translateY(10px);
	      }
	  }
// @-webkit-keyframes shaky-slow {  // 第二种效果
//   20% {
//       -webkit-transform: rotate(-0.5deg);
//   }
//   40% {
//       -webkit-transform: rotate(-0.5deg);
//   }
//   60% {
//       -webkit-transform: rotate(-0.5deg);
//   }
//   80% {
//       -webkit-transform: rotate(2deg);
//   }
//   90% {
//       -webkit-transform: rotate(-2deg);
//   }
//   100% {
//       -webkit-transform: rotate(0deg);
//   }
// }

<p class="shaky">文字文字文字</p>