Complex CSS Animation Repeating - use Javascript?

Question

I have a CSS animation which is quite complex, ie. it's layered, or brings in two images, one a background image, then an <img> tag inside that, to overlay the original.

Demo is here: http://wdb.blazeoven.co.uk/

HTML:

  <div class="container">
<a href="services.php">
  <div class="col-sm-3 home-circle" id="one">
      <img class="bottom" id="five" src="/assets/img/prop-consultants.png" alt="residential block in grounds">
  </div>
</a>
<a href="services.php">
  <div class="col-sm-3 home-circle" id="two">
    <img class="bottom" id="six" src="/assets/img/chartered-surveyors.png" alt="old residential house doorways">
  </div>
</a>
<a href="services.php">
  <div class="col-sm-3 home-circle" id="three">
    <img class="bottom" id="seven" src="/assets/img/managing-agents.png" 
      alt="row of shops">
  </div>
</a>
<a href="services.php">
  <div class="col-sm-3 home-circle" id="four">
    <img class="bottom" id="eight" src="/assets/img/city-central.png" alt="City shop premises">
  </div>
</a>

CSS:

@-webkit-keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
@-moz-keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
@keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.home-banner .container a .col-sm-3 {
   opacity:0; 
   -webkit-animation:fadeIn ease-in 1; 
   -moz-animation:fadeIn ease-in 1;
   animation:fadeIn ease-in 1;

   -webkit-animation-fill-mode:forwards; 
   -moz-animation-fill-mode:forwards;
   animation-fill-mode:forwards;

   -webkit-animation-duration:1s;
   -moz-animation-duration:1s;
   animation-duration:1s;
  }

.home-banner #one {
  background:url('/assets/img/propcons.svg') center no-repeat;
  background-size: 100%;

  -webkit-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s;
  animation-delay: 0.4s;
}
.home-banner #two {
  background:url('/assets/img/charsurv.svg') center no-repeat;
  background-size: 100%;

  -webkit-animation-delay: 0.8s;
  -moz-animation-delay: 0.8s;
  animation-delay: 0.8s;
}
.home-banner #three {
  background:url('/assets/img/manage.svg') center no-repeat;
  background-size: 100%;

  -webkit-animation-delay: 1.4s;
  -moz-animation-delay: 1.4s;
  animation-delay: 1.4s;
}
.home-banner #four {
  background:url('/assets/img/citycen.svg') center no-repeat;
  background-size: 100%;

  -webkit-animation-delay: 1.8s;
  -moz-animation-delay: 1.8s;
  animation-delay: 1.8s;
}
.grey-banner img.bottom {
 opacity:1;
 -webkit-animation:fadeOut ease-in 1; 
 -moz-animation:fadeOut ease-in 1;
 animation:fadeOut ease-in 1;

 // -webkit-animation-direction: alternate;
 // -moz-animation-direction: alternate;
 // animation-direction: alternate;


 -webkit-animation-fill-mode:forwards; 
 -moz-animation-fill-mode:forwards;
 animation-fill-mode:forwards;

 -webkit-animation-duration:1s;
 -moz-animation-duration:1s;
 animation-duration:1s;
}
.grey-banner img#five {
-webkit-animation-delay: 6.8s;
-moz-animation-delay: 6.8s;
animation-delay: 6.8s;
}

.grey-banner img#six {
-webkit-animation-delay: 7.4s;
-moz-animation-delay: 7.4s;
animation-delay: 7.4s;
}

.grey-banner img#seven {
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
animation-delay: 8s;
}
.grey-banner img#eight {
-webkit-animation-delay: 8.6s;
-moz-animation-delay: 8.6s;
animation-delay: 8.6s;
}

Trouble is, the client is requesting that it repeats again. That is, it plays in reverse, then starts again.

I have tried unsuccessfully to do this with CSS, is there a succinct way to do it with Javascript?

Thanks in advance for your comments.

Ben

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

You can repeat the animation using animation-iteration-count:

-moz-animation-iteration-count: 3; /* Firefox 5 -> 15 */
-webkit-animation-iteration-count: 3; /* Chrome, Safari, Opera */
animation-iteration-count: 3; /* Firefox 16, IE 10 */

Not supported in IE 9 and earlier.

You can also use the value infinite to repeat over and over.

Edit:

As I commented you can try with cubic-bezier:
Use no delay, and animation-duration:10s. You can try with these cubic-bezier values on the animation-timing-function for the four images:

animation-timing-function: cubic-bezier(0.2, 0.0, 0.0, 1.5);
animation-timing-function: cubic-bezier(0.4,-0.7, 0.4, 1.8);
animation-timing-function: cubic-bezier(0.7,-1.7, 0.7, 1.8);
animation-timing-function: cubic-bezier(0.9,-1.6, 0.8, 0.8);

I have not tried this myself, and I am not sure how well it works with the values that are < 0 and > 1 (which is not standard).

If you want to play around with how the cubic-bezier is set up, you can use the tool at http://cubic-bezier.com to help finding useful values.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Aug 14, 2015 at 8:17

awe

22.5k7 gold badges82 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

endymion1818 Over a year ago

Hi Awe, thanks for your answer. This did help immensely, although it's looking a little eclectic ... I don't think this is possible but there's no way of stipulating a delay between iterations that you know of?

awe Over a year ago

Instead of using fadein as the animation-timing-function, you could try to make a custom animation speed with cubic-bezier. See cubic-bezier.com to play around with possible values to get a grip on what it means. I don't know if this will help you, but it's worth a try. You can even use negative values, but I don't know what effect that will have on your case.

awe Over a year ago

Using different speeds on the cubic-bezier might be an option in combination with longer animation span, and no delay (use the bezier to act as the delay effect) this way the iteration count will match the entire animation, and not just loop on the 1s span.

endymion1818 Over a year ago

Hm thanks Awe, will give that a go now and let you know :-)

Phillip · Accepted Answer · 2015-08-14 08:13:40Z

1

You said the your client just wanted the animation to play normally, then play in reverse and then repeat.

It so happens that there is a CSS property called animation-direction. This property states whether the animation plays normally or in reverse. Use animation-direction: alternate; to – as the property value indicates – alternate between playing normally and in reverse.

Read more here: MDN: animation-direction

Hope this helps :)

answered Aug 14, 2015 at 8:13

Phillip

6,3033 gold badges26 silver badges36 bronze badges

1 Comment

endymion1818 Over a year ago

Thanks Phililip, yours and @awe's comments have helped a lot, I am approaching a solution although ... it looks a little eclectic at the minute.

Collectives™ on Stack Overflow

Complex CSS Animation Repeating - use Javascript?

2 Answers 2

Edit:

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Edit:

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related