关键帧动画在右边距上不起作用，但在左边距上效果很好

Question

我正在尝试在 id="hello" 元素上执行动画，动画在右边距上不起作用，但在左边距上效果很好，有什么想法吗？

<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 动画将起作用。

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

我不确定你想要完成什么样的动画。

Answer 2

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

最简单的解决方案是将“margin-right”更改为“margin-left”，并通过添加反转方向减号 (-) 因此移动将在“left”的相反方向完成，即“right".

“hello”动画的最终代码：

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

Also I have noticed that you wrote > ` < before "margin-left" on the from section of "hola" animation don't forget to remove it.

关键帧动画在右边距上不起作用，但在左边距上效果很好

keyframe animation is not working on the right-margin but works perfect on the left-margin

html

css

css-animations