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

i'm trying to perform an animation on the id="hello" element , the animation doesn't work on the right margin , but works perfectly on the left margin , any ideas please?

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

CodePudding user response：

It doesn't work because you're adding margin-right on the right side of the box, and since the box is aligned to the left, it doesn't push the box to the side.

And margin-left works because the boxes are aligned to the left, so adding a negative value will pull them out of view.

The margin-right animation would work if the box was aligned to the 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>

Im not sure what kind of animation are you trying to accomplish tho.

CodePudding user response：

That is because the page direction is LTR (Left To Right), and even if the page direction changed to RTL (Right To Left) Then: "margin-left" wont work anymore but "margin-right" will work!!

The easiest solution is to change the "margin-right" to "margin-left", and reverse the direction by adding a minus (-) so the movement will be done in the reversed direction of "left" which is "right".

Final code of the "hello" Animation:

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