How do you make an animation where 2 elements in a flex box will swap places

Question

So here is some of my html code

<div class="container">
    <div class="number one">1</div>
    <div class="number">2</div>
    <div class="number three">3</div>
</div>

And my css

    .container {
        display: flex;
        flex-direction: row;
        justify-content: center;
        background-color: red;
        width: 150px;
        margin: 4px;
        margin-top: 9px;
        box-shadow: 4px 4px 6px black;
    }

    .number {
        padding: 4px;
        margin-left: 8px;
        margin-right: 8px;
        background-color: navy;
    }

    .one {
        text-decoration: none;
        color: white;
        justify-content: flex-start;
    }

    .three {
        justify-content: flex-end;
    }

    @keyframes justATest {
        from {
            justify-content: flex-start;
        }
        to {
            justify-content: flex-end;
        }
    }

    @keyframes justATest2 {
        from {
            justify-content: flex-end;
        }
        to {
            justify-content: flex-start;
        }
    }

    .container:hover .one {
        animation: justATest;
        animation-duration: 4s;
    }

    .container:hover~.three {
        animation: justATest2;
        animation-duration: 4s;
    }

So my question is what is wrong with my code, I'm trying to have and animation where it will transition with an animation where .one and .three will switch places. What I'm doing right now with the animation is move the justified content from start to end and end start and apply that to one and three and when I hover container is when the animation starts, but it's not working, what is my problem?

Possible duplicate of [Swap DIV position with CSS only](https://stackoverflow.com/questions/17455811/swap-div-position-with-css-only) — Aashish Kumar, Mar 19 '18 at 14:29

score 0 · Answer 1 · answered Mar 19 '18 at 14:48

@AIDANKUKOSKY the use of justify-content is usually called upon at the parent container. You would not be able to move the individual content of each item with justify-content on the child component.

If you remove the justify-content on both .one and .three you will notice that the content does not move. You can only control the parents justify-content. If you want to individually control each child you would need them to be in a display: flex.

On hover of your parent (.container) you can add the flex-direction: row-reverse. This will achieve what you are looking for in the swapping of positions.

Checkout this Plunker at the end of the css in the .container:hover you can remove the comments on each line and see what I am talking about.

How do you make an animation where 2 elements in a flex box will swap places

1 Answers1