Transition with flexbox css

In the given css style sheet I want to add transition effect to the justify-content, changing its value from left to center. But the change from left to center is abrupt even after using transition:all 1s; for nav. However the transition is applied to h1's text color and background's color properly.<br>
Why it is happening and how to correct this?

body{
    background-color: white;
    transition:all 1s;
}
img{
    width:30%;    
}
div{
    display:flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-evenly;
    align-items:center;
}
nav{
    text-transform: uppercase;
    border-bottom:1px solid #c6bebe;
    padding:10px;
    margin:15px 0px 15px 30px;
    font-family: Raleway,sans-serif;
    font-size:30px;
    display: flex;
    justify-content:left;
    transition:all 2s;
}
h1{
    font-size: 40px;
    font-weight: 900;
    transition:all 1s;
}
@media (max-width:950px){
    body{
        background-color: rgb(28, 27, 27);
    }
    div{
        flex-direction: column;
    }
    img{
        width: 100%;
        margin:5px;
    }
    nav{
        justify-content: center;
    }
    h1{
        color:rgb(255, 255, 255);
    }
}

I tried to use margin as a turnaround but it is not an ideal solution.

justify-content doesn't have any intermediate values between "left" and "center" to animate smoothly during the transition. You can try using the transform property instead of justify-content to move the nav element from left to center.