Search code examples
javascripthtmlbuttontransitionsmoothing

Make read more button transition smooth

I copied some code from w3schools for a read more button but the transition is too quick, how can I make the transition slow and smooth probably with CSS, here's the link

Solution

  • if you want to change style of an element from display: none to display: inline, there's no transition for this case.

    you can use visibility and opacity instead of display property + transition:

    .element {
opacity: 0;
visibility: hidden;
transition: all 0.5s ease;
}
.element_active {
opacity: 1;
visibility: visible;
}

    if you want to change the size of the element, then use (max-)with or (max-) height + transition:

    .element {
    max-height: 100px;
    transition: all 0.5s ease;
    }
    .element_full-size {
    max-height: 200px;
    }