关键帧动画在右边距上不起作用，但在左边距上完美运行答案

【问题标题】：keyframe animation is not working on the right-margin but works perfect on the left-margin关键帧动画在右边距上不起作用，但在左边距上完美运行
【发布时间】：2022-01-08 17:57:52
【问题描述】：

我正在尝试在 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>

【问题讨论】：

标签： html css css-animations

【解决方案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>

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

【讨论】：

哦，就是这样，谢谢。对于动画，当我滚动这些元素时，我想实现从右到左和从左到右的简单翻译

【解决方案2】：

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

最简单的解决方法是将“margin-right”改为“margin-left”，并通过加减号（-)，所以移动将在“left”的相反方向进行，即“right”。

“hello”动画的最终代码：

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

另外我注意到你在 "hola" 动画的 from 部分的 "margin-left" 之前写了 > `

【讨论】：

哦，就是这样，谢谢你