CSS3 Animations , Individual section Animation length -

i using css3 animation script works great issue have want set custom slide lengths couple of them instead of 2 of them being 6 seconds may want them 2 seconds example.

does know if possible in css3? have searched , searched struggling.

figure:nth-child(1) {   animation: xfade 48s 42s infinite; } figure:nth-child(2) {   animation: xfade 48s 36s infinite; } figure:nth-child(3) {   animation: xfade 48s 30s infinite; } figure:nth-child(4) {   animation: xfade 48s 24s infinite; } figure:nth-child(5) {   animation: xfade 48s 18s infinite; } figure:nth-child(6) {   animation: xfade 48s 12s infinite; } figure:nth-child(7) {   animation: xfade 48s 6s infinite; } figure:nth-child(8) {   animation: xfade 48s 0s infinite; }  http://codepen.io/leemark/pen/vzcdo 

thanks much.

the animation (in codepen) referring uses approach had described in 1 of earlier answers here. animation achieved making each element animate 6s period while remain idle remaining 42s period (the time taken other 7 elements complete animation). achieved making actual animation (from opacity 1 0) completed @ 12.5% of animation duration (12.5% = 6/48 of 100%) , retain state till end of animation duration. other thing each element should start animation after previous 1 (or 1 placed on top) completes animation. achieved setting delays in multiples of 6s (as duration same all).

for case, since want 2 of elements animate on different duration, wouldn't possible single @keyframes rule (or if possible, become complex). need create many @keyframes rule there distinct timings.

so, following i've done:

• since have 2 distinct timings 2s , 6s, i've used 2 @keyframes rules. @keyframes percentage should modified suit our needs. first animation, each element has animate 6s out of total of 40s duration (6*6s + 2*2s), opacity change 1 0 must completed @ (6/40 * 100% = 15%). since image should actual stay visible period of time, set opacity 1 in both 0% , 7.5% (half of 15%) keyframes , @ 15% set 0. similary second animation, actual animation 2s out of total of 40s duration, change of opacity must completed @ (2/40 * 100% = 5%).
• now @keyframes rule completed, have change animation property per our needs. i've noted in previous point, our total animation duration 40s (first time value in animation property). first 2 images (:nth-child(8), :nth-child(7)) duration 2s, 1st image (8th child) delay 0s, 2nd (7th child) 2s (amount of time first complete animation), 3rd (6th child) 4s (2*2s previous 2 images), 4th (5th child) 10s (2*2s + 1*6s previous elements) , on.

doing above, required animation in below snippet.

body {    font-family: "helveticaneue-light", "helvetica neue light", "helvetica neue", helvetica, arial, "lucida grande", sans-serif;    font-weight: 300;  }  .css-slideshow {    position: relative;    max-width: 495px;    height: 370px;    margin: 5em auto .5em auto;  }  .css-slideshow figure {    margin: 0;    max-width: 495px;    height: 370px;    background: #000;    position: absolute;  }  .css-slideshow img {    box-shadow: 0 0 2px #666;  }  .css-slideshow figcaption {    position: absolute;    top: 0;    color: #fff;    background: rgba(0, 0, 0, .3);    font-size: .8em;    padding: 8px 12px;    opacity: 0;    transition: opacity .5s;  }  .css-slideshow:hover figure figcaption {    transition: opacity .5s;    opacity: 1;  }  .css-slideshow-attr {    max-width: 495px;    text-align: right;    font-size: .7em;    font-style: italic;    margin: 0 auto;  }  .css-slideshow-attr {    color: #666;  }  .css-slideshow figure {    opacity: 0;  }  figure:nth-child(1) {    animation: xfade 40s 34s infinite;  }  figure:nth-child(2) {    animation: xfade 40s 28s infinite;  }  figure:nth-child(3) {    animation: xfade 40s 22s infinite;  }  figure:nth-child(4) {    animation: xfade 40s 16s infinite;  }  figure:nth-child(5) {    animation: xfade 40s 10s infinite;  }  figure:nth-child(6) {    animation: xfade 40s 4s infinite;  }  figure:nth-child(7) {    animation: xfade1 40s 2s infinite;  }  figure:nth-child(8) {    animation: xfade1 40s 0s infinite;  }  @keyframes xfade {    0% {      opacity: 1;    }    7.5% {      opacity: 1;    }    15% {      opacity: 0;    }    98% {      opacity: 0;    }    100% {      opacity: 1;    }  }  @keyframes xfade1 {    0% {      opacity: 1;    }    2.5% {      opacity: 1;    }    5% {      opacity: 0;    }    98% {      opacity: 0;    }    100% {      opacity: 1;    }  }

<div class="css-slideshow">    <figure>      <img src="http://placehold.it/500x400/ff0000" alt="class-header-css3" width="495" height="370" class="alignnone size-full wp-image-172" />      <figcaption><strong>css3:</strong> css3 delivers wide range of stylization , effects, enhancing web app without sacrificing semantic structure or performance. additionally web open font format (woff) provides typographic flexibility , control far        beyond web has offered before.</figcaption>    </figure>    <figure>      <img src="http://placehold.it/500x400/00ff00" alt="class-header-semantics" width="495" height="370" class="alignnone size-full wp-image-179" />      <figcaption><strong>semantics:</strong> giving meaning structure, semantics front , center html5. richer set of tags, along rdfa, microdata, , microformats, enabling more useful, data driven web both programs , users.</figcaption>    </figure>    <figure>      <img src="http://placehold.it/500x400/0000ff" alt="class-header-offline" width="495" height="370" class="alignnone size-large wp-image-178" />      <figcaption><strong>offline &amp; storage:</strong> web apps can start faster , work if there no internet connection, html5 app cache, local storage, indexed db, , file api specifications.</figcaption>    </figure>    <figure>      <img src="http://placehold.it/500x400/ff00ff" alt="class-header-device" width="495" height="370" class="alignnone size-full wp-image-177" />      <figcaption><strong>device access:</strong> beginning geolocation api, web applications can present rich, device-aware features , experiences. incredible device access innovations being developed , implemented, audio/video input access        microphones , cameras, local data such contacts &amp; events, , tilt orientation.</figcaption>    </figure>    <figure>      <img src="http://placehold.it/500x400/ffff00" alt="class-header-connectivity" width="495" height="370" class="alignnone size-large wp-image-176" />      <figcaption><strong>connectivity:</strong> more efficient connectivity means more real-time chats, faster games, , better communication. web sockets , server-sent events pushing (pun intended) data between client , server more efficiently ever before.      </figcaption>    </figure>    <figure>      <img src="http://placehold.it/500x400/00ffff" alt="class-header-multimedia" width="495" height="370" class="alignnone size-large wp-image-175" />      <figcaption><strong>multimedia:</strong> audio , video first class citizens in html5 web, living in harmony apps , sites. lights, camera, action!</figcaption>    </figure>    <figure>      <img src="http://placehold.it/500x400/330033" alt="class-header-3d" width="495" height="370" class="alignnone size-large wp-image-174" />      <figcaption><strong>3d, graphics &amp; effects:</strong> between svg, canvas, webgl, , css3 3d features, you're sure amaze users stunning visuals natively rendered in browser.</figcaption>    </figure>    <figure>      <img src="http://placehold.it/500x400/330000" alt="class-header-performance" width="495" height="370" class="alignnone size-large wp-image-173" />      <figcaption><strong>performance &amp; integration:</strong> make web apps , dynamic web content faster variety of techniques , technologies such web workers , xmlhttprequest 2. no user should ever wait on watch.</figcaption>    </figure>  </div>  <p class="css-slideshow-attr"><a href="http://www.w3.org/html/logo/" target="_top">images , captions w3c</a>  </p>

---

say if need 1st 2 animate 2s, 3rd 6s, 4th 3s , remaining 6s have following:

• total animation duration 2*2s + 6s + 3s + 4*6s = 37s.
• the delays have set 0s, 2s, 4s, 10s, 13s, 19s, 25s , 31s respectively.
• as there 3 distinct duration, need 3 @keyframes rules. rule used elements 6s duration, opacity change 1 0 must completed @ (6/37 * 100%), 1 used elements 2s duration, should completed @ (2/37 * 100%), used element 3s duration, should (3/37 * 100%).

body {    font-family: "helveticaneue-light", "helvetica neue light", "helvetica neue", helvetica, arial, "lucida grande", sans-serif;    font-weight: 300;  }    .css-slideshow {    position: relative;    max-width: 495px;    height: 370px;    margin: 5em auto .5em auto;  }    .css-slideshow figure {    margin: 0;    max-width: 495px;    height: 370px;    background: #000;    position: absolute;  }    .css-slideshow img {    box-shadow: 0 0 2px #666;  }    .css-slideshow figcaption {    position: absolute;    top: 0;    color: #fff;    background: rgba(0, 0, 0, .3);    font-size: .8em;    padding: 8px 12px;    opacity: 0;    transition: opacity .5s;  }    .css-slideshow:hover figure figcaption {    transition: opacity .5s;    opacity: 1;  }    .css-slideshow-attr {    max-width: 495px;    text-align: right;    font-size: .7em;    font-style: italic;    margin: 0 auto;  }    .css-slideshow-attr {    color: #666;  }    .css-slideshow figure {    opacity: 0;  }    figure:nth-child(1) {    animation: xfade 37s 31s infinite;  }    figure:nth-child(2) {    animation: xfade 37s 25s infinite;  }    figure:nth-child(3) {    animation: xfade 37s 19s infinite;  }    figure:nth-child(4) {    animation: xfade 37s 13s infinite;  }    figure:nth-child(5) {    animation: xfade2 37s 10s infinite;  }    figure:nth-child(6) {    animation: xfade 37s 4s infinite;  }    figure:nth-child(7) {    animation: xfade1 37s 2s infinite;  }    figure:nth-child(8) {    animation: xfade1 37s 0s infinite;  }    @keyframes xfade {    0% {      opacity: 1;    }    8.1% {      opacity: 1;    }    16.2% {      opacity: 0;    }    98% {      opacity: 0;    }    100% {      opacity: 1;    }  }    @keyframes xfade1 {    0% {      opacity: 1;    }    2.7% {      opacity: 1;    }    5.4% {      opacity: 0;    }    98% {      opacity: 0;    }    100% {      opacity: 1;    }  }  @keyframes xfade2 {    0% {      opacity: 1;    }    4.05% {      opacity: 1;    }    8.1% {      opacity: 0;    }    98% {      opacity: 0;    }    100% {      opacity: 1;    }  }

<div class="css-slideshow">    <figure>      <img src="http://placehold.it/500x400/ff0000" alt="class-header-css3" width="495" height="370" class="alignnone size-full wp-image-172" />      <figcaption><strong>css3:</strong> css3 delivers wide range of stylization , effects, enhancing web app without sacrificing semantic structure or performance. additionally web open font format (woff) provides typographic flexibility , control far        beyond web has offered before.</figcaption>    </figure>    <figure>      <img src="http://placehold.it/500x400/00ff00" alt="class-header-semantics" width="495" height="370" class="alignnone size-full wp-image-179" />      <figcaption><strong>semantics:</strong> giving meaning structure, semantics front , center html5. richer set of tags, along rdfa, microdata, , microformats, enabling more useful, data driven web both programs , users.</figcaption>    </figure>    <figure>      <img src="http://placehold.it/500x400/0000ff" alt="class-header-offline" width="495" height="370" class="alignnone size-large wp-image-178" />      <figcaption><strong>offline &amp; storage:</strong> web apps can start faster , work if there no internet connection, html5 app cache, local storage, indexed db, , file api specifications.</figcaption>    </figure>    <figure>      <img src="http://placehold.it/500x400/ff00ff" alt="class-header-device" width="495" height="370" class="alignnone size-full wp-image-177" />      <figcaption><strong>device access:</strong> beginning geolocation api, web applications can present rich, device-aware features , experiences. incredible device access innovations being developed , implemented, audio/video input access        microphones , cameras, local data such contacts &amp; events, , tilt orientation.</figcaption>    </figure>    <figure>      <img src="http://placehold.it/500x400/ffff00" alt="class-header-connectivity" width="495" height="370" class="alignnone size-large wp-image-176" />      <figcaption><strong>connectivity:</strong> more efficient connectivity means more real-time chats, faster games, , better communication. web sockets , server-sent events pushing (pun intended) data between client , server more efficiently ever        before.</figcaption>    </figure>    <figure>      <img src="http://placehold.it/500x400/00ffff" alt="class-header-multimedia" width="495" height="370" class="alignnone size-large wp-image-175" />      <figcaption><strong>multimedia:</strong> audio , video first class citizens in html5 web, living in harmony apps , sites. lights, camera, action!</figcaption>    </figure>    <figure>      <img src="http://placehold.it/500x400/330033" alt="class-header-3d" width="495" height="370" class="alignnone size-large wp-image-174" />      <figcaption><strong>3d, graphics &amp; effects:</strong> between svg, canvas, webgl, , css3 3d features, you're sure amaze users stunning visuals natively rendered in browser.</figcaption>    </figure>    <figure>      <img src="http://placehold.it/500x400/330000" alt="class-header-performance" width="495" height="370" class="alignnone size-large wp-image-173" />      <figcaption><strong>performance &amp; integration:</strong> make web apps , dynamic web content faster variety of techniques , technologies such web workers , xmlhttprequest 2. no user should ever wait on watch.</figcaption>    </figure>  </div>  <p class="css-slideshow-attr"><a href="http://www.w3.org/html/logo/" target="_top">images , captions w3c</a></p>