SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    May 2006
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS animation delay and position issue

    Hi all,

    I have created an info bar that slides in from the top of the page (out of view - the same as on here). It works great but when I put a delay on it, the original start position is in view. So it appears until the animation starts. This makes total sense I just can't fathom how to get around it! I know it will be something simple.

    (I have removed all other browser prefixes for simplicity)

    Code CSS:
    @-webkit-keyframes fadeInDown {
    	0% {
     
    		-webkit-transform: translateY(-42px);
    	}
     
    	100% {
    		-webkit-transform: translateY(0);
    	}
    }
    #info {
    	position: absolute;
    	top: 0;
    	-webkit-animation: 1s ease;
    	-webkit-animation-name: fadeInDown;
    	-webkit-animation-delay: 1s;
    }

    Any ideas?

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

    Yuo could probably get the delay effect by moving the element further away and then increase the animation time.

    e.g.
    Code:
    @-webkit-keyframes fadeInDown {
    	
    	0% {
     
    		-webkit-transform: translateY(-1142px);
    	}
     
    	100% {
    		-webkit-transform: translateY(0);
    	}
    }
    #info {
    	position: absolute;
    	top: 0;
    	-webkit-animation: 3s ease;
    	-webkit-animation-name: fadeInDown;
    /*	-webkit-animation-delay: 1s;*/

  3. #3
    SitePoint Addict
    Join Date
    May 2006
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's a crafty solution!

    It works great, thanks Paul


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
  •