transition with inline elements issue

not sure what I am doing wrong as I can't make transition work on inline elements

#nickname-input, #nickname-span {
    transition: ease-in 1000ms;
}

#nickname-input, #nickname-span {
    transition: ease-in 1000ms;
}

these two are input and span containing text but they are not being eased in when page refreshes in like regular blocks are same thing works on div

3 Replies

DexinhoOP•16mo ago

<div id="container-for-selection">
        <div id='nickname-div'>
            <span id="nickname-span">Your nickname:</span>
        </div>
        <div id="nickname-input-div">
            <input type="text" name="nickname" id="nickname-input">
        </div>
</div>

<div id="container-for-selection">
        <div id='nickname-div'>
            <span id="nickname-span">Your nickname:</span>
        </div>
        <div id="nickname-input-div">
            <input type="text" name="nickname" id="nickname-input">
        </div>
</div>

HTML part

vince•16mo ago

Did you mean transition: all 1000ms ease-in?

briancross•16mo ago

What exactly are you trying to transition? If you can replicate the problem in a code pen it would be possible to troubleshoot it.

Gaming

Programming

transition with inline elements issue