Complex CSS Animation Repeating - use Javascript?

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

Answers


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.


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 :)


Need Your Help

PHPWord horizontal line (<hr />)

php phpword

I am currently using PHPWord to generate my documents, but I want to add an horizontal line in the document. Just like an in HMTL. In word you can do this by typing three underscores en enter, but I

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.