This question already has answers here:
Stopping a CSS3 Animation on last frame
(8个答案)
4年前关闭。
看下面的css。动画结束后,
这是小提琴
http://jsfiddle.net/uk4gxr8c/
(8个答案)
4年前关闭。
看下面的css。动画结束后,
bottom:0
根本不会应用div {
width: 100%;
position: absolute;
z-index: 999;
background: black;
color: white;
padding: 10px;
font-weight: bold;
-webkit-animation: mymove 1s; /* Chrome, Safari, Opera */
animation: mymove 1s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
div:empty {
-webkit-animation: mymoveClose 1s; /* Chrome, Safari, Opera */
animation: mymoveClose 1s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
from {bottom: -30px;}
to {bottom: 0px;}
}
/* Standard syntax */
@keyframes mymove {
from {bottom: -30px;}
to {bottom: 0px;}
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymoveClose {
from {bottom: 0px;}
to {bottom: -30px;}
}
/* Standard syntax */
@keyframes mymoveClose {
from {bottom: 0px;}
to {bottom: -30px;}
}
这是小提琴
http://jsfiddle.net/uk4gxr8c/
最佳答案
您需要指定一个animation-fill-mode
。
在这种情况下,forwards
将使动画以最终值结束。
每个MDN
目标将保留执行期间遇到的最后一个关键帧设置的计算值。遇到的最后一个关键帧取决于animation-direction和animation-iteration-count的值:
setTimeout(function() {
document.getElementById('div1').innerHTML = '';
}, 3000);
div {
width: 100%;
position: absolute;
z-index: 999;
background: black;
color: white;
padding: 10px;
height: 30px;
font-weight: bold;
box-sizing: border-box;
-webkit-animation: mymoveClose 1s;
/* Chrome, Safari, Opera */
animation: mymoveClose 1s linear forwards;
}
div:empty {
-webkit-animation: mymove 1s;
/* Chrome, Safari, Opera */
animation: mymove 1s linear forwards;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
from {
bottom: -30px;
}
to {
bottom: 0px;
}
}
/* Standard syntax */
@keyframes mymove {
from {
bottom: -30px;
}
to {
bottom: 0px;
}
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymoveClose {
from {
bottom: 0px;
}
to {
bottom: -30px;
}
}
/* Standard syntax */
@keyframes mymoveClose {
from {
bottom: 0px;
}
to {
bottom: -30px;
}
}
<div id="div1">linear</div>
关于html - 动画后元素不保留最终值,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/34020992/