Question

我已创建此箭头反弹，我想在反弹之间添加2秒的暂停。我在这里找到了几个类似的例子，但是他们没有为我的箭头工作（更改了弹跳动画）。

如果我添加以下内容，我只会暂停一次：

-webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
animation-delay: 2s;

无论如何，这是代码：

HTML：

<div class="btn-bottom"></div>

CSS：

.btn-bottom{
  width: 48px;
  height: 58px;
  background: url("https://d30y9cdsu7xlg0.cloudfront.net/png/10897-200.png") 
  center center no-repeat;
  background-size: 47px;
  margin: auto;
  top: 40px;
  left: 0;
  right: 0;
  cursor: pointer;
  -webkit-animation: bounce 2.5s infinite;
  animation: bounce 2.5s infinite;
}

@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        -webkit-transform: translateY(0); 
    }
    40% {
        -webkit-transform: translateY(-30px); 
    }
    60% {
        -webkit-transform: translateY(-15px); 
    } 
}
@-moz-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        -moz-transform: translateY(0); 
    }
    40% {
        -moz-transform: translateY(-30px); 
    }
    60% {
        -moz-transform: translateY(-15px); 
    } 
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0); 
    }
    20%, 50%, 80%, 100% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0); 
    }
    40% {
        -webkit-transform: translateY(-30px);
        -moz-transform: translateY(-30px);
        -ms-transform: translateY(-30px);
        -o-transform: translateY(-30px);
        transform: translateY(-30px); 
    }
    60% {
        -webkit-transform: translateY(-15px);
        -moz-transform: translateY(-15px);
        -ms-transform: translateY(-15px);
        -o-transform: translateY(-15px);
        transform: translateY(-15px); 
    } 
}

的jsfiddle：

https://jsfiddle.net/92xmw541/

Answer 1

最简单的方法是使动画的持续时间更长（4秒以下），并使用关键帧使用动画时间的一半。关键帧的其余关键帧将处于静止状态。

.btn-bottom {
  width: 48px;
  height: 58px;
  background: url("https://d30y9cdsu7xlg0.cloudfront.net/png/10897-200.png") center center no-repeat;
  background-size: 47px;
  margin: auto;
  top: 40px;
  left: 0;
  right: 0;
  cursor: pointer;
  animation: bounce 4s infinite;
}

@keyframes bounce {
  10%,
  20%,
  30%,
  40%,
  50% {
    transform: translateY(0);
  }
  15% {
    transform: translateY(-30px);
  }
  25% {
    transform: translateY(-15px);
  }
  35% {
    transform: translateY(-5px);
  }
  45% {
    transform: translateY(-2px);
  }
}

<div class="btn-bottom"></div>

Answer 2

这是一个纯Javascript解决方案，我最终在CSS动画（例如animate.css）之间实现了延迟。

function repeatAnimate(element, delay) {
    delay = delay || 5000;
    setTimeout(function () {
        element.style.webkitAnimation = 'none';
        setTimeout(function () {
            element.style.webkitAnimation = '';
            repeatAnimate(element, delay);
        }, 10);
    }, delay)
}

用法：

$(function () {
    var element = document.getElementsByClassName('btn-play')[0];
    repeatAnimate(element, 2000);
});

在这种情况下，HTML标记中已经存在animated和bounce类。

在不定式CSS动画中暂停

2 个答案: