CSS幻灯片动画在段落和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 之前需要一个@