关键帧 animation 不在右边距上工作，但在左边距上工作完美

Question

我正在尝试在 id="hello" 元素上执行 animation，animation 在右边距上不起作用，但在左边距上完美运行，请问有什么想法吗？

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        #hola {
            width: 250px;
            height: 250px;
            background-color: red;
            animation-name: hola;
            animation-duration: 2s;
            animation-fill-mode: forwards;}
        #hello {
            width: 250px;
            height: 250px;
            background-color: red;
            animation-name: hello;
            animation-duration: 2s;
            animation-fill-mode: forwards;}
        @keyframes hola {
            from {
           `    margin-left: -250px;
            }

            to {
                margin-left: 10px;
            }}
        @keyframes hello {
            from {
                margin-right: 10px;}
            to {
                margin-right: 1000px;}}
    </style>
    <title>Document</title>
</head>
<body>
    <div>
        <h1>My tranforming element</h1>
        <div id="hola"><p>Hola</p></div>
        <div id="hello"><p>Hello</p></div>
    </div>
</body>
</html>

Answer 1

它不起作用，因为您在框的右侧添加了margin-right ，并且由于框与左侧对齐，它不会将框推到一边。

并且margin-left有效，因为这些框与左侧对齐，因此添加负值会将它们拉出视图。

如果框向右对齐，则margin-right animation 将起作用。

 <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> #hola { width: 250px; height: 250px; background-color: red; animation-name: hola; animation-duration: 2s; animation-fill-mode: forwards; } #hello { width: 250px; height: 250px; background-color: red; animation-name: hello; animation-duration: 2s; animation-fill-mode: forwards; /* Second box is aligned to the right */ position: absolute; right: 0px; } @keyframes hola { from { margin-left: -250px; } to { margin-left: 10px; }} @keyframes hello { from { margin-right: -250px;} to { margin-right: 10px;}} </style> <title>Document</title> </head> <body> <div> <h1>My tranforming element</h1> <div id="hola"><p>Hola</p></div> <div id="hello"><p>Hello</p></div> </div> </body> </html>

我不确定您要完成哪种 animation。

Answer 2

那是因为页面方向是 LTR（从左到右），即使页面方向更改为 RTL（从右到左）然后：“margin-left”将不再起作用，但“margin-right”将起作用！

最简单的解决方案是将“ margin-right ”更改为“ margin-left ”，并通过添加减号（ - ）来反转方向，这样移动将沿“ left ”的相反方向进行，即“ right ”。

“你好”Animation的最终代码：

@keyframes hello {
    from {
        margin-left: -10px;
    }
    to {
        margin-left: -1000px;
    }
}

另外我注意到您在“hola”animation 的 from 部分的“margin-left”之前写了 > ` < 不要忘记删除它。

关键帧 animation 不在右边距上工作，但在左边距上工作完美

问题描述

2 个解决方案

解决方案1
0 2022-01-08 09:57:04

解决方案2
0 2022-01-08 09:57:52

关键帧 animation 不在右边距上工作，但在左边距上工作完美

问题描述

2 个解决方案

解决方案1 0 2022-01-08 09:57:04

解决方案2 0 2022-01-08 09:57:52

解决方案1
0 2022-01-08 09:57:04

解决方案2
0 2022-01-08 09:57:52