Question

当我使用纯CSS加载页面时，我试图让图像向左滑动。

所以，我得到了http://jsfiddle.net/o7thwd/qZbhJ/，它似乎有效。我似乎无法克服的问题是，一旦动画结束，图像将如何重新进入视图。

#slide {
    left:0;
    width:268px;    
    -moz-animation-name: slideOut;
    -moz-animation-iteration-count: once;
    -moz-animation-timing-function: ease-out;
    -moz-animation-duration: 1.5s;
    -webkit-animation-name: slideOut;
    -webkit-animation-iteration-count: once;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-duration: 1.5s;
    -o-animation-name: slideOut;
    -o-animation-iteration-count: once;
    -o-animation-timing-function: ease-out;
    -o-animation-duration: 1.5s;
    animation-name: slideOut;
    animation-iteration-count: once;
    animation-timing-function: ease-out;
    animation-duration: 1.5s; 
}
@-o-keyframes slideOut {
    0% {
        margin-left: 0;
    }
    100% {
        margin-left: -268px;
    }
}
@keyframes slideOut {
    0% {
        margin-left: 0;
    }
    100% {
        margin-left: -268px;
    }
}
@-moz-keyframes slideOut {
    0% {
        margin-left: 0;
    }
    100% {
        margin-left: -268px;
    }
}
@-webkit-keyframes slideOut {
    0% {
        margin-left: 0;
    }
    100% {
        margin-left: -268px;
    }
}

如何让它像在初始页面加载时一样向左折叠？

Answer 1

基本上你添加了以下的CSS -webkit-animation-fill-mode: forwards;，动画结束将是持久的，而不是恢复原状。

<强> WORKING JSFIDDLE

哦，您只需要使用动态特定的-webkit-供应商，动画没有-moz-或-o-供应商细节

CSS：

#slide {
    left:0;
    width:268px;    
    -webkit-animation-name: slideOut;
    -webkit-animation-iteration-count: once;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-duration: 1.5s;   
    animation-name: slideOut;
    animation-iteration-count: once;
    animation-timing-function: ease-out;
    animation-duration: 1.5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@keyframes slideOut {
    0% {
        margin-left: 0;
    }
    100% {
        margin-left: -268px;
    }
}

@-webkit-keyframes slideOut {
    0% {
        left: 0;
    }
    100% {
        left: -268px;
    }
}

CSS3在页面加载上滑出动画

1 个答案: