Dudas con efecto transition

[Alexis88]

En CSS no existe el evento click, sin embargo, podrías obtener el resultado que deseas usando radio buttons ocultos y etiquetas en lugar de botones (a los cuales podrías darles esa apariencia con CSS). En la hoja de estilos, podrías indicar que, cuando uno de los radio button esté marcado, se desplace un bloque asociado a él, produciéndose el efecto que buscas.

Un ejemplo:

Código HTML:

<section>
    <input type = "radio" name = "boton" id = "a" checked />
    <label for = "a">Primero</label>
    <div class = "block">BLOQUE A</div>
</section>
    
<section>
    <input type = "radio" name = "boton" id = "b" />
    <label for = "b">Segundo</label>
    <div class = "block">BLOQUE B</div>
</section>
 

Código CSS:

.block{
    width: 100%;
    height: 35rem;
    margin-left: -100rem;
    position: absolute;
    transition: .75s;
}
 
[type=radio]{
    display: none;
}
 
[type=radio]:checked ~ .block{
    margin-left: 0;
}
 

Tenemos dos secciones, cada una contiene a un radio button con el mismo nombre pero con identificador distinto, una etiqueta que, al ser clickeada, activará al radio button cuyo identificador se especifica en el atributo for y una división. En la hoja de estilos, le doy dimensiones a las divisiones, así como una posición absoluta, además, las coloco varios píxeles hacia la izquierda para que no sean visibles y asigno una transición de 0.75 segundos para darle un efecto de deslizamiento suave. Oculto a los radio button y, cuando marque a alguno de ellos, desplazo a la división que se encuentre a continuación hasta el margen izquierda de la ventana, haciéndose así visible.

DEMO y CÓDIGO

Saludos