鱼C论坛

 找回密码
 立即注册
查看: 899|回复: 3

[已解决]为什么我的小熊为什么最后停不在中间 动画名称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>
最佳答案
2023-6-18 11:05:45
将move动画中的50%修改为100%即可,forwards停留在最后一帧指的是动画100%的时候
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2023-5-25 22:25:57 | 显示全部楼层
您好,根据您提供的代码,您设置了一个名为“move”的动画,并且指定了动画执行时间为5秒,当动画结束时,用了关键字“forwards”,表示动画停留在最后一帧。但是,在50%时,您设置了元素的left属性为50%,并且使用了margin-left属性让元素居中,这可能导致元素停留在屏幕中间的位置偏移。您可以尝试将50%更改为49.9%,或者调整margin-left的值来达到您想要的效果。此外,您还可以使用Web Animation API来控制元素的动画行为,以实现更精细的控制和效果。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2023-5-25 22:48:37 | 显示全部楼层
sfqxx 发表于 2023-5-25 22:25
您好,根据您提供的代码,您设置了一个名为“move”的动画,并且指定了动画执行时间为5秒,当动画结束时, ...

没听懂,这是最后的结果,运行完后完全不在中间位置
6.png
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2023-6-18 11:05:45 | 显示全部楼层    本楼为最佳答案   
将move动画中的50%修改为100%即可,forwards停留在最后一帧指的是动画100%的时候
Snipaste_2023-06-18_11-04-08.jpg
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-11-23 19:37

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表