CSS анимация с интервалом и задержкой только со второго раза

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?
Спасибо.
Обновление: вот демо: демо

Answer 1

Вот, пожалуйста. Я изменил код так, чтобы полная анимация заканчивалась на 20%, и после этого она ничего не будет делать до 100%. Для получения более подробной информации, посетите эту ссылку
ПРИМЕЧАНИЕ : Вы также можете клонировать веб-набор в код ключевых кадров. Я удалил это

  @-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>