【问题标题】：keyframes animations not returning to first point or repeating关键帧动画不返回第一点或重复
【发布时间】：2018-05-25 12:11:21
【问题描述】：
我正在尝试使用不会返回到第一个位置的关键帧，我的意思是如果我有从左到右的过渡，则保持在右侧而不是返回到左侧。
代码
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example;
-webkit-animation-duration: 4s;
animation-name: example;
animation-duration: 4s;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
0% {
background-color: red;
left: 0px;
top: 0px;
}
100% {
background-color: yellow;
left: 200px;
top: 0px;
}
}
/* Standard syntax */
@keyframes example {
0% {
background-color: red;
left: 0px;
top: 0px;
}
100% {
background-color: yellow;
left: 200px;
top: 0px;
}
}
<div></div>
【问题讨论】：
标签：
css
animation
css-animations
【解决方案1】：
您只需将animation-fill-mode: forwards; 添加到 div。
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example;
-webkit-animation-duration: 4s;
-webkit-animation-fill-mode: forwards;
animation-name: example;
animation-duration: 4s;
animation-fill-mode: forwards;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
0% {background-color:red; left:0px; top:0px;}
100% {background-color:yellow; left:200px; top:0px;}
}
/* Standard syntax */
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
100% {background-color:yellow; left:200px; top:0px;}
}
<div></div>
【解决方案2】：
您只需要添加 'animation-iteration-count: 1' 它将单独工作，或者如果您想在循环中使用它，则可以尝试将 'animation-iteration-count:infinite' 放入 div。
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example;
-webkit-animation-duration: 4s;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 1; /*value can be infinite if you want to it in loop */
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
0% {
background-color: red;
left: 0px;
top: 0px;
}
50%{
background-color: yellow;
left: 200px;
top: 0px;
}
100% {
background-color: red;
left: 0px;
top: 0px;
}
}
/* Standard syntax */
@keyframes example {
0% {
background-color: red;
left: 0px;
top: 0px;
}
50%{
background-color: yellow;
left: 200px;
top: 0px;
}
100% {
background-color: red;
left: 0px;
top: 0px;
}
}
<div></div>