Question

我想间隔执行一些div动画。第一次播放动画，然后将其延迟，然后（从第二次开始）将有一个间隔。之后，动画将每X秒播放一次。

这是我到目前为止得到的，但是动画在延迟后开始：

@-webkit-keyframes shake {
10%,
90% {
    -webkit-transform: translate3d(-1px, 0, 0);
    transform: translate3d(-1px, 0, 0);
}
20%,
80% {
    -webkit-transform: translate3d(2px, 0, 0);
    transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
    -webkit-transform: translate3d(-4px, 0, 0);
    transform: translate3d(-4px, 0, 0);
}
40%,
60% {
    -webkit-transform: translate3d(4px, 0, 0);
    transform: translate3d(4px, 0, 0);
    }
}
@keyframes shake {
    10%,
    90% {
        -webkit-transform: translate3d(-1px, 0, 0);
        transform: translate3d(-1px, 0, 0);
    }
    20%,
    80% {
        -webkit-transform: translate3d(2px, 0, 0);
        transform: translate3d(2px, 0, 0);
    }
    30%,
    50%,
    70% {
        -webkit-transform: translate3d(-4px, 0, 0);
        transform: translate3d(-4px, 0, 0);
    }
    40%,
    60% {
        -webkit-transform: translate3d(4px, 0, 0);
        transform: translate3d(4px, 0, 0);
    }
}

.error-container {
    position: absolute;
    left: auto;
    border-collapse: separate;
    margin: 0;
    padding: 2px 10px;
    list-style: none;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    background: #d9534f;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    display: none;
    z-index: 100;
    &.active {
        display: block;
        -webkit-animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both 4s infinite;
        animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both 4s infinite;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000px;
        perspective: 1000px;
    }
}

有没有Javascript可能吗？
谢谢。
更新：这是一个演示：demo

Answer 1

您在这里。我所做的是更改了代码，以使完整的动画以20％结尾，此后直到100％为止它什么都不做。有关更多详细信息，请访问此link
注意：您也可以将Webkit克隆到关键帧代码。我删除了

  @-webkit-keyframes shake {
    2%,
    18% {
        -webkit-transform: translate3d(-1px, 0, 0);
        transform: translate3d(-1px, 0, 0);
    }
    4%,
    16% {
        -webkit-transform: translate3d(2px, 0, 0);
        transform: translate3d(2px, 0, 0);
    }
    6%,
    10%,
    14% {
        -webkit-transform: translate3d(-4px, 0, 0);
        transform: translate3d(-4px, 0, 0);
    }
    8%,
    12% {
        -webkit-transform: translate3d(4px, 0, 0);
        transform: translate3d(4px, 0, 0);
    }
    100%{
       -webkit-transform: translate3d(0px, 0, 0);
        transform: translate3d(0px, 0, 0);
    }
}


.error-container {
    position: absolute;
    left: auto;
    border-collapse: separate;
    margin: 0;
    padding: 2px 10px;
    list-style: none;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    background: #d9534f;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    display: none;
    z-index: 100;
    &.active {
        display: block;
       animation: shake 4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both  infinite;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000px;
        perspective: 1000px;
    }
}

Answer 2

您可以更改animation-duration上的迭代这是示例

@import url(https://fonts.googleapis.com/css?family=Montserrat:700,400);
* {
  box-sizing: border-box;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: purple;
  font-family: 'Montserrat', sans-serif;
}
html, body {
  height: 100%;
}

button {
  background: #333;
  color: #fff;
  border-radius: 40px;
  padding: 15px 30px;
  border: 0;
  overflow: hidden;
  width: 200px;
  transition: 
    all        1.2s,
    border     0.5s 1.2s,
    box-shadow 0.3s 1.5s;
  white-space: nowrap;
  text-indent: 23px;
  font-weight: bold;
  }
  span {
    display: inline-block;
    transform: translateX(300px);
    font-weight: normal;
    opacity: 0;
    transition: 
      opacity 0.1s 0.5s,
      transform 0.4s 0.5s;
  }
  button:hover {
    text-indent: 0;
    background: #55706D;
    color: #FFE8A3;
    width: 250px;
    }
    button:hover span {
      transform: translateX(0);
      opacity: 1;
    }

<button>
  Animate
  <span>After Delay</span>
</button>

仅从第二次开始就有间隔和延迟的CSS动画

2 个答案: