Question

First code shows you a working animation for an h5 (Headline slides in from left to right) but when I use the same code for a div nothing happens, the div stays fix and is immediately visible when I load the page without an animation. Pls. help.

h5 CSS Style – WORKING

h5 {
    font: 25px Arial, serif;
    position: absolute;
    left: 77%;
    top: 0;
    width: 175px;
    padding: 25px 15px 15px 15px;
    margin: 0;
    color: rgb(249, 249, 249);
    background-image: url(bgg.png);
    background-repeat: repeat;

    -moz-border-radius-bottomright:20px;
    -moz-border-radius-bottomleft:20px; 
    -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
    border-bottom-right-radius:20px;
    border-bottom-left-radius:20px;

    -webkit-animation-name: h5Slider;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count:1;
    -webkit-animation-directiuon:normal;
    -moz-animation-name: h5Slider;
    -moz-animation-duration: 2s;
    -moz-animation-iteration-count:1;
    -moz-animation-directiuon:normal;

}


@-webkit-keyframes h5Slider {
    from {
        margin: 0 0 0 -35%;
    }
    to {
        margin: 0;
    }
}


@-moz-keyframes h5Slider {

    from {
        margin: 0 0 0 -35%;
    }
    to {
        margin: 0;
    }
}

div CSS Style – NOT WORKING

#canvas1Div {
    background-image: url(bgg.png);
    background-repeat: repeat;
    position: absolute;
    margin:-100px 0px 0px -200px;
    top: 45%; 
    left: 50%;

    -webkit-animation-name: divSlider;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count:1;
    -webkit-animation-direction:normal;
    -moz-animation-name: divSlider;
    -moz-animation-duration: 2s;
    -moz-animation-iteration-count:1;
    -moz-animation-directiuon:normal;
}


-webkit-keyframes divSlider {
    from {
        margin: 0 0 0 -35%;
    }
    to {
        margin: 0;
    }
}


@-moz-keyframes divSlider {
    from {
        margin: 0 0 0 -35%;
    }
    to {
        margin: 0;
    }
}

Answer 1

You need an @ before -webkit-keyframes divSlider