[已解决]为什么我的小熊为什么最后停不在中间动画名称Move forwards生效了吗

她与晚风 · 发表于 2023-5-25 21:36:38

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-color: rgb(175, 194, 211);
}
div{
position: absolute;
width: 200px;
height: 100px;
/*
元素可以添加多个动画,用逗号分隔
*/
background: url(https://img-blog.csdnimg.cn/9811146e174b4d8f940d8b92cf2b4c94.png) no-repeat 0 0;
animation: bear 2s steps(8) infinite,move 5s linear forwards;
}
@keyframes bear{
0%{
}
100%{
background: url(https://img-blog.csdnimg.cn/9811146e174b4d8f940d8b92cf2b4c94.png) no-repeat -1600px 0;
}
}
@keyframes move {
0%{
left: 0;
}
50%{
left: 50%;
margin-left: -100px;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

复制代码

最佳答案

月排行榜 / 总排行榜

TKXZ

2023-6-18 11:05:45

将move动画中的50%修改为100%即可，forwards停留在最后一帧指的是动画100%的时候

跳转到最佳答案楼层

sfqxx · 发表于 2023-5-25 22:25:57

您好，根据您提供的代码，您设置了一个名为“move”的动画，并且指定了动画执行时间为5秒，当动画结束时，用了关键字“forwards”，表示动画停留在最后一帧。但是，在50%时，您设置了元素的left属性为50%，并且使用了margin-left属性让元素居中，这可能导致元素停留在屏幕中间的位置偏移。您可以尝试将50%更改为49.9%，或者调整margin-left的值来达到您想要的效果。此外，您还可以使用Web Animation API来控制元素的动画行为，以实现更精细的控制和效果。

她与晚风 · 发表于 2023-5-25 22:48:37

sfqxx 发表于 2023-5-25 22:25
您好，根据您提供的代码，您设置了一个名为“move”的动画，并且指定了动画执行时间为5秒，当动画结束时， ...

没听懂,这是最后的结果,运行完后完全不在中间位置

TKXZ · 发表于 2023-6-18 11:05:45

将move动画中的50%修改为100%即可，forwards停留在最后一帧指的是动画100%的时候

账号		自动登录	找回密码
密码			立即注册

[已解决]为什么我的小熊为什么最后停不在中间 动画名称Move forwards生效了吗

马上注册，结交更多好友，享用更多功能^_^

[已解决]为什么我的小熊为什么最后停不在中间动画名称Move forwards生效了吗