#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Posts
    156
    Rep Power
    13

    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; October 3rd, 2013 at 08:27 AM.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Posts
    156
    Rep Power
    13
    Sorry got it working in IE10 but the home link jumps for some reason

    Any ideas?

    Sorry

IMN logo majestic logo threadwatch logo seochat tools logo