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

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


<!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>

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%的时候
页: [1]
查看完整版本: 为什么我的小熊为什么最后停不在中间 动画名称Move forwards生效了吗