我试图在页面加载时使用纯 CSS 使图像向左滑出。
到目前为止,我已经得到:http://jsfiddle.net/o7thwd/qZbhJ/这似乎有效。我似乎无法解决的问题是动画结束后图像如何重新回到 View 中。
#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;
}
}
如何让它像初始页面加载时那样保持向左折叠?
最佳答案
基本上,您添加以下 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 滑出动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18147416/