1

Hi I am currently trying to make an infinite chain image animation, with each image has different animation (in my case a shrink and expand animation).

I can do for 1 animation, however for 2 or more animation I cant seem to make the animation chain to work as both opacity would be 0, and the second image would just rush the animation. Are there any way to solve this problem without any jQuery (As I am currently using Angular for this project)?

my html code

<div class="container">
    <img class="image1" src="https://i.pinimg.com/originals/87/22/19/872219e39469e56ff5742581122212bf.jpg"/>
    <img class="image2" src="https://hdqwalls.com/wallpapers/spiderman-into-the-spider-verse-arts-ks.jpg"/>
</div>

my css code

.container {
  width:500px;
  height:500px;
  position:relative;
  overflow:hidden;
}

 .image1,.image2 {
    max-width: 100%;
    z-index:-1;
    position: absolute;
    opacity: 0;
  }
  .image1{
    animation: shrink 10s ease infinite;
  }

  .image2 {
    animation-delay: 10s;
    animation: expand 20s ease infinite;
  }


@keyframes expand {
  0% {
    opacity: 0;
  }
  50% {
    transform: scale(1.4);
    opacity: 1;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

@keyframes shrink {
  0%{
    transform: scale(1.4);
    opacity: 0;
  }
  50%{
    transform: scale(1);
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

I would like for image1, it would run "shrink" animation, as for image2, it would wait for shrink animation to finish, then on it would run "expand" animation. And It would run infinitely.

Thank you any help is appreciated.

PikaDude
  • 31
  • 4
  • I would suggest making it one animation and putting it on animation: infinite – ezra Nov 10 '19 at 15:59
  • @E2017 Hi Thank you for your suggestion, I tried to combine the both animation into ```animation: shrink 10s, expand 10s``` and ```animation-iteration-count:infinite```, the change is smooth however, the animation only works for expand, and image1 immediately changes to image2 after the first 2 animations. Here is a link to the codepen: [Demo](https://codepen.io/andreSatria/pen/ZEEjbVm) – PikaDude Nov 10 '19 at 16:28
  • Unfortunately animation-delay only works for the start of animation, not between iterations. To have delays between iterations you need to factor that into the keyframes themselves. See here: https://stackoverflow.com/questions/13887889/css-animation-delay-in-repeating – Michael Beeson Nov 10 '19 at 17:01
  • Have you looked into Angular animations? https://angular.io/guide/animations – Michael Beeson Nov 10 '19 at 17:02

0 Answers0