需求
想用html+css制作一个上下跳动效果的动画，然后记录一下代码，方便今后使用。
实例代码
<!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>
