我们经常看见某些元素会上上下下,这个CSS3就可以完成此动作
@-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{
-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{
-webkit-animation: bounce-up 1.4s linear infinite;
animation: bounce-up 1.4s linear infinite;
}
运用
<div class="animate-bounce-up"></div>