Play animation every 15 second css

Question

I'm trying to create an animation that will run infinite time every 15second. Also, I want to play the animation in this order -> 1, 2, 3, 4, 3, 2, 1 (need to animation items back) Every animation has a different delay. Can it possible with CSS? Animation delay is working only on the first iteration. When animation time is long it is easy to achieve this effect, but with 1s or smaller can't find a good way.

.container {
  display: flex;
  margin: 40px;
}

.item1,
.item2,
.item3,
.item4 {
  width: 100px;
  height: 60px;
  background-color: pink;
  margin: 6px;
  animation: glow .7s alternate-reverse;
}

@keyframes glow {
  0%,
  100% {
    box-shadow: 0 0 -6px -6px black;
  }
  50% {
    box-shadow: 0 0 6px 6px black;
  }
}

.item1 {
  animation-delay: 1s;
}

.item2 {
  animation-delay: 1.1s;
}

.item3 {
  animation-delay: 1.2s;
}

.item4 {
  animation-delay: 1.3s;
}

user_15579573 · Answer

I think It may help you.

.container {
  display: flex;
  margin: 40px;
}

.item1,
.item2,
.item3,
.item4 {
  width: 100px;
  height: 60px;
  background-color: pink;
  margin: 6px;
}

@keyframes glow1 {
  0%{box-shadow: 0 0 -6px -6px black;}
  1% {box-shadow: 0 0 6px 6px black;}
  2%{ box-shadow: 0 0 -6px -6px black;}
  3%{box-shadow: 0px 0px 0px 0px black;}
  3%,9%,13%{box-shadow: 0px 0px 0px 0px black;}
  10%{box-shadow: 0 0 -6px -6px black;}
  11% {box-shadow: 0 0 6px 6px black;}
  12%{ box-shadow: 0 0 -6px -6px black;}
  99%{box-shadow: 0px 0px 0px 0px black;}
  100%{box-shadow: 0 0 -6px -6px black;}
}
@keyframes glow2 {
  0%{box-shadow: 0 0 -6px -6px black;}
  1% {box-shadow: 0 0 6px 6px black;}
  2%{ box-shadow: 0 0 -6px -6px black;}
  3%,7%{box-shadow: 0px 0px 0px 0px black;}
  8%{box-shadow: 0 0 -6px -6px black;}
  9% {box-shadow: 0 0 6px 6px black;}
  10%{ box-shadow: 0 0 -6px -6px black;}
  11%{box-shadow: 0px 0px 0px 0px black;}
  99%{box-shadow: 0px 0px 0px 0px black;}
  100%{box-shadow: 0 0 -6px -6px black;}
}
@keyframes glow3 {
  0%{box-shadow: 0 0 -6px -6px black;}
  1% {box-shadow: 0 0 6px 6px black;}
  2%{ box-shadow: 0 0 -6px -6px black;}
  3%,5%{box-shadow: 0px 0px 0px 0px black;}
  6%{box-shadow: 0 0 -6px -6px black;}
  7% {box-shadow: 0 0 6px 6px black;}
  8%{ box-shadow: 0 0 -6px -6px black;}
  9%{box-shadow: 0px 0px 0px 0px black;}
  99%{box-shadow: 0px 0px 0px 0px black;}
  100%{box-shadow: 0 0 -6px -6px black;}
}
@keyframes glow4 {
  0%{box-shadow: 0 0 -6px -6px black;}
  1% {box-shadow: 0 0 6px 6px black;}
  2%{ box-shadow: 0 0 -6px -6px black;}
  3%{box-shadow: 0px 0px 0px 0px black;}
  4%{box-shadow: 0 0 -6px -6px black;}
  5% {box-shadow: 0 0 6px 6px black;}
  6%{ box-shadow: 0 0 -6px -6px black;}
  7%{box-shadow: 0px 0px 0px 0px black;}
  99%{box-shadow: 0px 0px 0px 0px black;}
  100%{box-shadow: 0 0 -6px -6px black;}
}

.item1 {
  animation: glow1 10s linear 1s infinite;
}

.item2 {
  animation: glow2 10s linear 1.1s infinite;
}

.item3 {
  animation:glow3 10s linear 1.2s infinite;
}

.item4 {
  animation:glow4 10s linear 1.3s infinite;  
}

Play animation every 15 second css

1 Answers