页面加载时的 CSS3 滑出动画答案

【问题标题】：CSS3 Slide Out Animation on Page Load页面加载时的 CSS3 滑出动画
【发布时间】：2013-08-09 22:09:50
【问题描述】：

我正在尝试让图像在使用纯 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;
    }
}

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

【问题讨论】：

你有没有想过用display: none;隐藏它
是的，但我需要动画...因此我问...
stackoverflow.com/questions/3273478/…

标签： css css-animations

【解决方案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;
    }
}

【讨论】：