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 2 of 2
  1. #1
    New Coder
    Join Date
    Apr 2012
    Posts
    78
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS help with keyframes

    Hi

    I got some coding off the net as my client wants a swinging nav menu so have done it but is not working in IE

    Does anyone have any ideas on how to get it working in good old IE

    The HTML is below

    Code:
    <a href="index.php"><div class="home"></div></a>
    
    <div class="recipes"></div>
    
    <a href="kids-recipes.php"><div class="kidsrecipes"></div></a>
    
    <a href="nutritional-values.php"><div class="nutritionalvalues"></div></a>
    
    <a href="spice-up-your-life.php"><div class="spicelife"></div></a>
    The css coding is below

    Code:
    @-moz-keyframes swing{
        0%{-moz-transform:rotate(-3deg)}
        50%{-moz-transform:rotate(3deg)}
        100%{-moz-transform:rotate(-3deg)}
    }
    
    @-webkit-keyframes swing{
        0%{-webkit-transform:rotate(-3deg)}
        50%{-webkit-transform:rotate(3deg)}
        100%{-webkit-transform:rotate(-3deg)}
    }
    Sorry also got this in the css styles for each link

    Code:
    -moz-animation: 3s ease 0s normal none infinite swing;
        -moz-transform-origin: center top;
        -webkit-animation:swing 3s infinite ease-in-out;
        -webkit-transform-origin:top;
    The site is below

    http://www.irhwebsites.com/sites/moonlight/index.php

    The swinging nav menu only works in Google Chrome at the mo

    Kind regards

    Ian
    Last edited by ianhaney; 10-03-2013 at 02:27 PM.

  • #2
    New Coder
    Join Date
    Apr 2012
    Posts
    78
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry got it working in IE10 but the home link jumps for some reason

    Any ideas?

    Sorry


  •  

    Posting Permissions

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