css动画--元素上下跳动
html动画效果在H5场景动画时，常常会⽤到着⼀样⼀个效果，箭头持续上下跳动来引导⽤户上下滑动整个页⾯
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>css动画--元素上下跳动</title>
<style type="text/css">
@-webkit-keyframes bounce-down {
25% {-webkit-transform: translateY(-10px);}
50%, 100% {-webkit-transform: translateY(0);}
75% {-webkit-transform: translateY(10px);}
}
@keyframes bounce-down {
25% {transform: translateY(-10px);}
50%, 100% {transform: translateY(0);}
75% {transform: translateY(10px);}
}
.animate-bounce-down{ background:#333; width: 100px; height: 100px; margin:100px auto;-webkit-animation: bounce-down 1.5s linear infinite;animation: bounce-down 1.5s linear infinite;        }
@-webkit-keyframes bounce-up {
25% {-webkit-transform: translateY(10px);}
50%, 100% {-webkit-transform: translateY(0);}
75% {-webkit-transform: translateY(-10px);}
}
@keyframes bounce-up {
25% {transform: translateY(10px);}
50%, 100% {transform: translateY(0);}
75% {transform: translateY(-10px);}
}
.animate-bounce-up{ background:#ddd; width: 100px; height: 100px; margin:100px auto;-webkit-animation: bounce-up 1.4s linear infinite;animation: bounce-up 1.4s linear infinite;} </style>
</head>
<body>
<div class="animate-bounce-up"></div>
<div class="animate-bounce-down"></div>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。