动画中的 CSS Slide 在段落和 h1 上工作但不在 div 上工作

Question

第一个代码向您展示了 h5 的工作动画(标题从左向右滑入)但是当我对 div 使用相同的代码时没有任何反应， div 保持固定并且在我加载没有动画的页面时立即可见。请。帮助。

h5 CSS 样式 - 有效

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 样式 - 不工作

#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

在-webkit-keyframes divSlider之前需要一个@