Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Oct 2006
    Posts
    82
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Can't get any webkit features to work

    Hi guys,

    I must be missing something really simple here, but I can't get any webkit features to work on my site.

    In the example link below, the first paragraph of text in the chalk circle should be loading in on a delay, after the rest of the content:

    http://frances.casafelipe.co.uk/about/

    p#about-1 {
    padding-left: 160px;
    padding-top: 190px;
    width: 210px;

    -webkit-animation-name: reset, fade-in;
    -webkit-animation-duration: 2.5s;
    -webkit-animation-timing-function: ease-in;

    -moz-animation-name: reset, fade-in;
    -moz-animation-duration: 2.5s;
    -moz-animation-timing-function: ease-in;

    animation-name: reset, fade-in;
    animation-duration: 2.5s;
    animation-timing-function: ease-in;

    -webkit-animation-delay: 0, 2s;
    -moz-animation-delay: 0, 2s;
    animation-delay: 0, 2s;
    }

    I can see the exact same code working on another site, so I must be missing something. Do I need to do anything special to use webkit features?

    The loading effect I want to achieve is basically this: http://www.thomashardy.me.uk/cv/

    Thanks in advance

  • #2
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    You are missing something. First, lets get rid of the delay so we can work on one animation and see it immediately.

    Code:
    p#about-1 {
    
    /* GET RID OF THIS PART
    
    -webkit-animation-delay: 0, 2s;
    -moz-animation-delay: 0, 2s;
    animation-delay: 0, 2s;
    */
    
    }
    Next, take a look at "animation-name". You have two names for it, but no corresponding keyframes. These animation names are "reset" and "fade-in". Lets get rid of reset.

    Code:
    p#about-1 {
    -webkit-animation-name: fade-in;
    -webkit-animation-duration: 2.5s;
    -webkit-animation-timing-function: ease-in;
    
    -moz-animation-name: fade-in;
    -moz-animation-duration: 2.5s;
    -moz-animation-timing-function: ease-in;
    
    animation-name: fade-in;
    animation-duration: 2.5s;
    animation-timing-function: ease-in;
    We have an "animation-name" called fade-in. We set the duration to 2.5 seconds, but our browser still doesn't know what to do with it. That's because you need to create the keyframes. You need something like this:

    Code:
    @keyframes YOUR_ANIMATION_NAME {
        0%   { opacity: 0; }
        100% { opacity: 1; }
    }
    You don't have that so you need to add this:

    Code:
    @keyframes fade-in {
        from {
            opacity:0;
        }
        to {
            opacity:1;
        }
    }
    @-moz-keyframes fade-in {
        from {
            opacity:0;
        }
        to {
            opacity:1;
        }
    }
    @-webkit-keyframes fade-in {
        from {
            opacity:0;
        }
        to {
            opacity:1;
        }
    }
    @-o-keyframes fade-in {
        from {
            opacity:0;
        }
        to {
            opacity: 1;
        }
    }
    From there, I'm certain you'll be able to figure out how to animate the entire page.
    Last edited by ttkim; 03-22-2013 at 01:02 AM.

  • #3
    New Coder
    Join Date
    Oct 2006
    Posts
    82
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thank you - you're a legend!

    So now I have everything fading in over a period of X seconds, the only thing I can't figure out is how I set the elements to not actually start fading in for a period of time which I set.

    At the moment every element starts fading in at the same time, and changing the seconds -webkit-animation-duration seems to be just slow down the fade in but doesn't actually delay the load of the object.

    I tried adding:

    -webkit-animation-delay: 0, 1s;
    -moz-animation-delay: 0, 1s;
    animation-delay: 0, 1s;

    but this is not working.

    Thanks in advance

  • #4
    Regular Coder
    Join Date
    Sep 2011
    Posts
    330
    Thanks
    3
    Thanked 35 Times in 35 Posts
    The correct syntax is:
    Code:
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    animation-delay: 1s;
    And please wrap code tags around your code, with the # button on the form. You can still do that with your previous messages. Please do so.
    Last edited by Frankie; 03-22-2013 at 12:09 PM.
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.


  •  

    Posting Permissions

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