Thread: Keyframes

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

    Join Date
    Oct 2013
    Posts
    1
    Rep Power
    0

    Keyframes


    Hi,

    I'm practicing with keyframes but I don't succeed.
    I tried this code:

    Code:
    h1 {
      animation-duration: 3s;
      animation-name: slidein;
    }
     
    @keyframes slidein {
      from {
        margin-left: 100%;
        width: 300%
      }
     
      to {
        margin-left: 0%;
        width: 100%;
      }
    }

    with and without a "." before h1
    and this in the html page:

    Code:
    <h1>hoi</h1>
    <div id="h1">hoi</div>
    but both are not sliding to the right.
    In dreamweaver it looks like the two opening "{{" in the keyframes are wrong but i read it should work like this. Anyone who can help?
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    709
    Rep Power
    441
    Newer CSS code often doesn't work by default. Sometimes you have to add a prefix before the code. What browser are you using?

    If you're using Safari or Chrome, you may need to add:

    Code:
    @-webkit-keyframes {
    /* same code as before */
    }

IMN logo majestic logo threadwatch logo seochat tools logo