Streamlit screen shifting after experimental rerun

I have made a multipage application, where the current page is stored in a page variable in session state.

import streamlit.components.v1 as components
import streamlit as st
import SessionState
import time
session_state = SessionState.get(page='Welcome', user='')
if session_state.page=='Welcome':
    import time
    st.set_page_config(layout="wide")
    st.markdown('''<style>
    body {
    background-color: #ECEFF1;
    }

    .welcomeText {
    font-size:40px; text-align:center; animation: fadeIn linear 2000ms
    }

    .stButton>button {
    background-color:#EEF3F5;
    animation: fadeIn linear 2000ms;
    border-width:3px;
    border-color:#999999;
    height: 8em;
    width: 13em;
    font-weight: bold
    }

    @keyframes fadeIn {
      0% {opacity:0;}
      100% {opacity:1;}
    }

    @-moz-keyframes fadeIn {
      0% {opacity:0;}
      100% {opacity:1;}
    }

    @-webkit-keyframes fadeIn {
      0% {opacity:0;}
      100% {opacity:1;}
    }

    @-o-keyframes fadeIn {
      0% {opacity:0;}
      100% {opacity:1;}
    }

    @-ms-keyframes fadeIn {
      0% {opacity:0;}
      100% {opacity:1;}
    }
    </style>''', unsafe_allow_html=True)
    st.markdown('<p class="welcomeText">Welcome to the Pancreatitis EASY APP...</p>', unsafe_allow_html=True)
    col1, col2, login, register, col5, col6 = st.columns(6)
    login=login.button('Log in to your account')
    register=register.button('Register a new account')
    if login:
        st.markdown('\n')
        session_state.page='Login'
        time.sleep(0.3)
        st.experimental_rerun()

If I click on the login button it takes me into the login page. Not always but sometimes before loading the login page, the screen flickers and the text on the first page shifts right or left or it collapses in the center. I have no idea why does it happen. Can someone give me an idea why does this happen or tell me a workaround?