css 弹跳箭头

Posted 2021-05-13

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css 弹跳箭头相关的知识，希望对你有一定的参考价值。

.emporium-link a.arrowlink {
	background:url(../images/home-emporium-arrow.png) no-repeat;
	margin:0px auto;
	width:29px;
	height:29px;
	display:block;
	/*
	-webkit-animation: bounce 1.4s ease-in-out infinite;
	-moz-animation: bounce 1.4s ease-in-out infinite;
	-o-animation: bounce 1.4s ease-in-out infinite;
	animation: bounce 1.4s ease-in-out infinite;
	*/
}

@-webkit-keyframes bounce {
    0% { -webkit-transform: translate3d(0, 0px,0);
         -webkit-animation-timing-function: ease-out; }
   50% { -webkit-transform: translate3d(10px, 0px,0);
         -webkit-animation-timing-function: ease-in; }
  100% { -webkit-transform: translate3d(0, 0px,0); }
}
@-moz-keyframes bounce {
	0% { -moz-transform: translate3d(0, 0px,0);
         -moz-animation-timing-function: ease-out; }
   50% { -moz-transform: translate3d(10px, 0px,0);
         -moz-animation-timing-function: ease-in; }
  100% { -moz-transform: translate3d(0, 0px,0); }
}

以上是关于css 弹跳箭头的主要内容，如果未能解决你的问题，请参考以下文章

Twitter Bootstrap轮播不同高度图像导致弹跳箭头