CSS animation with interval and delay only from the second time - css

Question

I want to perform some div animation with intervals. In the first time the animation will play, and then it will be delayed, and then (from the second time) there will be an interval. After that, the animation will be played every X seconds.
This is what I got so far, but the animation starts after delay:
#-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;
}
}
Is it possible without any JavaScript?Thanks.
Update: here is a demo: [demo][1]

Answer 1

Here you go. What I did is I changed the code so that complete animation ends at 20% and after that it will do nothing till 100%. For more details, visit this link
NOTE: You can clone the webkit to keyframes code as well. I removed it
#-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

You can change iteration on animation-duration
here is example
#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>