0

第一个代码向您展示了一个工作动画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;
    }
}
4

1 回答 1

0

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

于 2012-09-08T18:45:28.110 回答