SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS3 Animation Delay Times

    Hi there,

    I am trying to make each image display at equal lengths of time, however the last image (12) seems to get stuck, then it shifts to image 3 instead instead of image 1 to start the animation again?

    I have set the animation to last 4 seconds which is 48/12 images. Really can't figure out why image 12 transitions to image 3 instead of 1??

    Code:
    <div id="container">
    	<div id="crossfade">
        	<img src="images/img1.jpg">
        	<img src="images/img2.jpg">
        	<img src="images/img3.jpg">
    	<img src="images/img4.jpg">
        	<img src="images/img5.jpg">
        	<img src="images/img6.jpg">
    	<img src="images/img7.jpg">
        	<img src="images/img8.jpg">
    	<img src="images/img9.jpg">
        	<img src="images/img10.jpg">
        	<img src="images/img11.jpg">
    	<img src="images/img12.jpg">
            </div>
    </div>
    Code:
    #fadecontainer {
    	position: relative;
    	margin-bottom: 390px;
    }
    
    #crossfade > img {
        position: absolute;
        top: 10px;
        left: 0px;
        color: transparent;
    	border: 1px solid #000000;
    	opacity: 0;
        z-index: 0;
        -webkit-backface-visibility: hidden;
        -webkit-animation: imageAnimation 44s linear infinite 0s;
        -moz-animation: imageAnimation 44s linear infinite 0s;
        -o-animation: imageAnimation 44s linear infinite 0s;
        -ms-animation: imageAnimation 44s linear infinite 0s;
        animation: imageAnimation 44s linear infinite 0s;
    }
    
    #crossfade > img:nth-child(1)  {
        -webkit-animation-delay: 0s;
        -moz-animation-delay: 0s;
        -o-animation-delay: 0s;
        -ms-animation-delay: 0s;
        animation-delay: 0s;
    }
    #crossfade > img:nth-child(2)  {
        -webkit-animation-delay: 4s;
        -moz-animation-delay: 4s;
        -o-animation-delay: 4s;
        -ms-animation-delay: 4s;
        animation-delay: 4s;
    }
    
    #crossfade > img:nth-child(3) {
        -webkit-animation-delay: 8s;
        -moz-animation-delay: 8s;
        -o-animation-delay: 8s;
        -ms-animation-delay: 8s;
        animation-delay: 8s;
    }
    
    #crossfade > img:nth-child(4) {
        -webkit-animation-delay: 12s;
        -moz-animation-delay: 12s;
        -o-animation-delay: 12s;
        -ms-animation-delay: 12s;
        animation-delay: 12s;
    }
    
    #crossfade > img:nth-child(5) {
        -webkit-animation-delay: 16s;
        -moz-animation-delay: 16s;
        -o-animation-delay: 16s;
        -ms-animation-delay: 16s;
        animation-delay: 16s;
    }
    
    #crossfade > img:nth-child(6) {
        -webkit-animation-delay: 20s;
        -moz-animation-delay: 20s;
        -o-animation-delay: 20s;
        -ms-animation-delay: 20s;
        animation-delay: 20s;
    }
    #crossfade > img:nth-child(7) {
        -webkit-animation-delay: 24s;
        -moz-animation-delay: 24s;
        -o-animation-delay: 24s;
        -ms-animation-delay: 24s;
        animation-delay: 24s;
    }
    #crossfade > img:nth-child(8) {
        -webkit-animation-delay: 28s;
        -moz-animation-delay: 28s;
        -o-animation-delay: 28s;
        -ms-animation-delay: 28s;
        animation-delay: 28s;
    }
    #crossfade > img:nth-child(9) {
        -webkit-animation-delay: 32s;
        -moz-animation-delay: 32s;
        -o-animation-delay: 32s;
        -ms-animation-delay: 32s;
        animation-delay: 32s;
    }
    #crossfade > img:nth-child(10) {
        -webkit-animation-delay: 36s;
        -moz-animation-delay: 36s;
        -o-animation-delay: 36s;
        -ms-animation-delay: 36s;
        animation-delay: 36s;
    }
    #crossfade > img:nth-child(11) {
        -webkit-animation-delay: 40s;
        -moz-animation-delay: 40s;
        -o-animation-delay: 40s;
        -ms-animation-delay: 40s;
        animation-delay: 40s;
    }
    #crossfade > img:nth-child(12) {
        -webkit-animation-delay: 44s;
        -moz-animation-delay: 44s;
        -o-animation-delay: 44s;
        -ms-animation-delay: 44s;
        animation-delay: 44s;
    }
    
    @-webkit-keyframes imageAnimation {
        0% { opacity: 0;
        -webkit-animation-timing-function: ease-in; }
        4% { opacity: 1;
             -webkit-animation-timing-function: ease-out; }
        25% { opacity: 1 }
        30% { opacity: 0 }
        100% { opacity: 0 }
    }
    
    @-moz-keyframes imageAnimation {
        0% { opacity: 0;
        -moz-animation-timing-function: ease-in; }
        4% { opacity: 1;
             -moz-animation-timing-function: ease-out; }
        25% { opacity: 1 }
        30% { opacity: 0 }
        100% { opacity: 0 }
    }
    
    @-o-keyframes imageAnimation {
        0% { opacity: 0;
        -o-animation-timing-function: ease-in; }
        4% { opacity: 1;
             -o-animation-timing-function: ease-out; }
        25% { opacity: 1 }
        30% { opacity: 0 }
        100% { opacity: 0 }
    }
    
    @-ms-keyframes imageAnimation {
        0% { opacity: 0;
        -ms-animation-timing-function: ease-in; }
        4% { opacity: 1;
             -ms-animation-timing-function: ease-out; }
        25% { opacity: 1 }
        30% { opacity: 0 }
        100% { opacity: 0 }
    }
    
    @keyframes imageAnimation {
        0% { opacity: 0;
        animation-timing-function: ease-in; }
        4% { opacity: 1;
             animation-timing-function: ease-out; }
        25% { opacity: 1 }
        30% { opacity: 0 }
        100% { opacity: 0 }
    }

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Something like this seems to work.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style>
    #fadecontainer {
    	position: relative;
    	margin-bottom: 390px;
    }
    
    #crossfade > img {
        position: absolute;
        top: 10px;
        left: 10px;
        color: transparent;
    	border: 1px solid #000000;
    	opacity: 0;
        z-index: 0;
        -webkit-backface-visibility: hidden;
        -webkit-animation: imageAnimation 48s linear infinite 0s;
        -moz-animation: imageAnimation 48s linear infinite 0s;
        -o-animation: imageAnimation 48s linear infinite 0s;
        -ms-animation: imageAnimation 48s linear infinite 0s;
        animation: imageAnimation 48s linear infinite 0s;
    				-moz-animation-timing-function: ease-in-out;
    				animation-timing-function: ease-in-out;
    				animation-timing-function: ease-in-out;
    }
    
    #crossfade > img:nth-child(1)  {
        -webkit-animation-delay: 0s;
        -moz-animation-delay: 0s;
        -o-animation-delay: 0s;
        -ms-animation-delay: 0s;
        animation-delay: 0s;
    				background:red;
    }
    #crossfade > img:nth-child(2)  {
        -webkit-animation-delay: 4s;
        -moz-animation-delay: 4s;
        -o-animation-delay: 4s;
        -ms-animation-delay: 4s;
        animation-delay: 4s;
    				background:blue
    }
    
    #crossfade > img:nth-child(3) {
        -webkit-animation-delay: 8s;
        -moz-animation-delay: 8s;
        -o-animation-delay: 8s;
        -ms-animation-delay: 8s;
        animation-delay: 8s;
    				background:green
    }
    
    #crossfade > img:nth-child(4) {
        -webkit-animation-delay: 12s;
        -moz-animation-delay: 12s;
        -o-animation-delay: 12s;
        -ms-animation-delay: 12s;
        animation-delay: 12s;
    				background:pink;
    }
    
    #crossfade > img:nth-child(5) {
        -webkit-animation-delay: 16s;
        -moz-animation-delay: 16s;
        -o-animation-delay: 16s;
        -ms-animation-delay: 16s;
        animation-delay: 16s;
    				background:yellow
    }
    
    #crossfade > img:nth-child(6) {
        -webkit-animation-delay: 20s;
        -moz-animation-delay: 20s;
        -o-animation-delay: 20s;
        -ms-animation-delay: 20s;
        animation-delay: 20s;
    				background:teal
    }
    #crossfade > img:nth-child(7) {
        -webkit-animation-delay: 24s;
        -moz-animation-delay: 24s;
        -o-animation-delay: 24s;
        -ms-animation-delay: 24s;
        animation-delay: 24s;
    				background:orange;
    }
    #crossfade > img:nth-child(8) {
        -webkit-animation-delay: 28s;
        -moz-animation-delay: 28s;
        -o-animation-delay: 28s;
        -ms-animation-delay: 28s;
        animation-delay: 28s;
    				background:black;
    }
    #crossfade > img:nth-child(9) {
        -webkit-animation-delay: 32s;
        -moz-animation-delay: 32s;
        -o-animation-delay: 32s;
        -ms-animation-delay: 32s;
        animation-delay: 32s;
    				background:#fcf;
    }
    #crossfade > img:nth-child(10) {
        -webkit-animation-delay: 36s;
        -moz-animation-delay: 36s;
        -o-animation-delay: 36s;
        -ms-animation-delay: 36s;
        animation-delay: 36s;
    				background:#0F0
    }
    #crossfade > img:nth-child(11) {
        -webkit-animation-delay: 40s;
        -moz-animation-delay: 40s;
        -o-animation-delay: 40s;
        -ms-animation-delay: 40s;
        animation-delay: 40s;
    				background:#666666
    }
    #crossfade > img:nth-child(12) {
        -webkit-animation-delay: 44s;
        -moz-animation-delay: 44s;
        -o-animation-delay: 44s;
        -ms-animation-delay: 44s;
        animation-delay: 44s;
    				background:#ccc;
    }
    
    @-webkit-keyframes imageAnimation {
        0% { opacity: 0;}
        4% { opacity: 1 }
        12% { opacity: 0 }
    }
    
    @-moz-keyframes imageAnimation {
        0% { opacity: 0;}
        4% { opacity: 1 }
        12% { opacity: 0 }
    }
    
    @-o-keyframes imageAnimation {
        0% { opacity: 0;}
        4% { opacity: 1; }
        12% { opacity: 0 }
    }
    
    @-ms-keyframes imageAnimation {
         0% { opacity: 0;}
        4% { opacity: 1 }
        12% { opacity: 0 }
    }
    
    @keyframes imageAnimation {
         0% { opacity: 0;}
        4% { opacity: 1 }
        12% { opacity: 0 }
    }
    
    
    img{/* for testing */
    	display:block;
    	background:red;
    	width:300px;
    	height:300px;
    }
    </style>
    </head>
    
    <body>
    <div id="container">
    	<div id="crossfade">
        	<img src="images/img1.jpg">
        	<img src="images/img2.jpg">
        	<img src="images/img3.jpg">
    	<img src="images/img4.jpg">
        	<img src="images/img5.jpg">
        	<img src="images/img6.jpg">
    	<img src="images/img7.jpg">
        	<img src="images/img8.jpg">
    	<img src="images/img9.jpg">
        	<img src="images/img10.jpg">
        	<img src="images/img11.jpg">
    	<img src="images/img12.jpg">
            </div>
    </div>
    </body>
    </html>
    Each image takes 48 seconds to animate but only visible for 2 seconds and then fades out over 4 seconds which allows the next image to fade in before the one before has vanished.

  3. #3
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This seems to work fine indeed Paul O'B so thanks very much for the time you have taken to look into this.

    I have played about with the code further and did a bit more research and my problem was due to:


    Code:
    4% { opacity: 1;
             -ms-animation-timing-function: ease-out; }
        25% { opacity: 1 }
    This means that 25% - 4% = 21% and 21% * the 12 images is greater than 100% !! So with this in mind, I have changed the delay times as follows (using one browser example) :

    Code:
    @keyframes imageAnimation {
        0% { opacity: 0;
    	-webkit-animation-timing-function: ease-in; }
    	2% { opacity: 1; -webkit-animation-timing-function: ease-out; }
    	8.333% { opacity: 1 }
    	10% { opacity: 0 }
    	100% { opacity: 0 }
    This now means that 100% / 12 (number of images) = 8.3333% which means Opacity: 1 from 2% to 8.333% in the animation, and this seems to work fine too.

    Thanks for your help indeed.

    Regards
    Volterony

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Glad you got it working
    Quote Originally Posted by volterony View Post
    This seems to work fine indeed Paul O'B so thanks very much for the time you have taken to look into this.

    I have played about with the code further and did a bit more research and my problem was due to:
    Yes that's why I reduced the actual animation part down to 6 seconds (2 seconds in and 4 seconds out to allow the next image to fade in while the previous one fades out.). You had the images fading in over 2% approx but then remaining opaque for a further 12 seconds which meant by the time you get to the end you had a number of images still being processed.

    The duration should be 48 seconds for the combined animation not 44 as you want the last one to be visible for 4 seconds before the first one kicks in again.

    You should also remove the animation-timing properties from the keyframes rules as they have no effect there. The animation timing is defined for the element and has no meaning as part of a keyframe because the timing is already in action. If you want ease-in-out then change it on '#crossfade > img ' where you have it as linear.

  5. #5
    SitePoint Member
    Join Date
    Feb 2014
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    CSS3 animation properties can be studied in great detail here http://www.tutorialspark.com/css3Ref...y_Property.php


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •