Applying transition on flexbox justify-content property

justify-content is not a transition-able property. You can find the full list of compatible properties here. All unlisted properties should simply snap to their new value.

If you happen to need to animate a single element only, you may try using absolute positioning.

#wrapper {
    position: relative;
}

#element {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    transition: all 300ms;
}

#element:hover {
    left: 0;
    transform: translateX(0);
}

Keep in mind that this will not work for multiple elements.