CSS3 Animations , Individual section Animation length

Question

I am using this CSS3 Animation script which works great but the only issue I have is I want to set custom slide lengths to a couple of them so instead of two of them being 6 seconds I may want them to be 2 seconds for example.

Does anyone know if this is possible in CSS3? I have searched and searched but am 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 so much.

Harry · Accepted Answer

The animation (in CodePen) that you were referring to uses the approach that I had described in one of my earlier answers here. The animation is basically achieved by making each element animate for a 6s period while the remain idle for the remaining 42s period (the time taken for the other 7 elements to complete their animation). This is achieved by making the actual animation (from opacity 1 to 0) be completed at 12.5% of the animation duration itself (12.5% = 6/48 of 100%) and retain its state almost till the end of the animation duration. The other thing is that each element should start their animation only after the previous one (or the one that is placed on top) completes its animation. This is achieved by setting delays in multiples of 6s (as the duration is same for all).

For your case, since you want just 2 of the elements to animate over a different duration, it wouldn't be possible to do with a single @keyframes rule (or even if possible, it would become very complex). You would need to create as many @keyframes rule as there are distinct timings.

So, the following is what I've done:

Since we have two distinct timings 2s and 6s, I've used two @keyframes rules. The @keyframes percentage should also be modified to suit our needs. For the first animation, each element has to animate for 6s out of a total of 40s duration (6*6s + 2*2s), so the opacity change from 1 to 0 must be completed at (6/40 * 100% = 15%). Since the image should actual stay visible for some period of time, we set the opacity as 1 in both the 0% and the 7.5% (half of 15%) keyframes and then at 15% set it as 0. Similary for the second animation, the actual animation would be 2s out of a total of 40s duration, so the change of opacity must be completed at (2/40 * 100% = 5%).
Now that the @keyframes rule is completed, we have to change the animation property as per our needs. As I've noted in the previous point, our total animation duration is 40s (first time value in the animation property). Then for the first two images (:nth-child(8), :nth-child(7)) the duration is 2s, so the 1st image (8th child) the delay would be 0s, for the 2nd (7th child) it would be 2s (amount of time for first to complete its animation), for the 3rd (6th child) it would 4s (2*2s for the previous two images), for the 4th (5th child) it would be 10s (2*2s + 1*6s for the previous elements) and so on.

Doing the above, we would get the required animation like in the 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 a {
  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 a wide range of stylization and effects, enhancing the web app without sacrificing your semantic structure or performance. Additionally Web Open Font Format (WOFF) provides typographic flexibility and control far
      beyond anything the 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 to structure, semantics are front and center with HTML5. A richer set of tags, along with RDFa, microdata, and microformats, are enabling a more useful, data driven web for both programs and your 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 and work even if there is no internet connection, thanks to the HTML5 App Cache, as well as the Local Storage, Indexed DB, and the 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 with the Geolocation API, Web Applications can present rich, device-aware features and experiences. Incredible device access innovations are being developed and implemented, from audio/video input access to
      microphones and cameras, to local data such as contacts &amp; events, and even 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, and better communication. Web Sockets and Server-Sent Events are pushing (pun intended) data between client and server more efficiently than 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 and video are first class citizens in the HTML5 web, living in harmony with your apps and 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, and CSS3 3D features, you're sure to amaze your users with stunning visuals natively rendered in the 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 your Web Apps and dynamic web content faster with a variety of techniques and technologies such as Web Workers and XMLHttpRequest 2. No user should ever wait on your watch.</figcaption>
  </figure>
</div>
<p class="css-slideshow-attr"><a href="http://www.w3.org/html/logo/" target="_top">Images and captions are from the W3C</a>
</p>

Say if you need 1st two to animate for 2s, 3rd for 6s, 4th for 3s and the remaining for 6s then you have to do the following:

Total animation duration would be 2*2s + 6s + 3s + 4*6s = 37s.
The delays would have to be set as 0s, 2s, 4s, 10s, 13s, 19s, 25s and 31s respectively.
As there are three distinct duration, we would need 3 @keyframes rules. For the rule used by the elements with 6s duration, the opacity change from 1 to 0 must be completed at (6/37 * 100%), for the one used by elements with 2s duration, it should be completed at (2/37 * 100%), for that used by the element with 3s duration, it should be (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 a {
  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 a wide range of stylization and effects, enhancing the web app without sacrificing your semantic structure or performance. Additionally Web Open Font Format (WOFF) provides typographic flexibility and control far
      beyond anything the 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 to structure, semantics are front and center with HTML5. A richer set of tags, along with RDFa, microdata, and microformats, are enabling a more useful, data driven web for both programs and your 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 and work even if there is no internet connection, thanks to the HTML5 App Cache, as well as the Local Storage, Indexed DB, and the 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 with the Geolocation API, Web Applications can present rich, device-aware features and experiences. Incredible device access innovations are being developed and implemented, from audio/video input access to
      microphones and cameras, to local data such as contacts &amp; events, and even 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, and better communication. Web Sockets and Server-Sent Events are pushing (pun intended) data between client and server more efficiently than 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 and video are first class citizens in the HTML5 web, living in harmony with your apps and 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, and CSS3 3D features, you're sure to amaze your users with stunning visuals natively rendered in the 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 your Web Apps and dynamic web content faster with a variety of techniques and technologies such as Web Workers and XMLHttpRequest 2. No user should ever wait on your watch.</figcaption>
  </figure>
</div>
<p class="css-slideshow-attr"><a href="http://www.w3.org/html/logo/" target="_top">Images and captions are from the W3C</a></p>

CSS3 Animations , Individual section Animation length

Tags:

css

css-animations

Bradley

1 Answers

Harry

Recent Activity

Donate For Us

CSS3 Animations , Individual section Animation length

Tags:

css

css-animations

Bradley

1 Answers

Harry

Related questions

Recent Activity

Donate For Us