transición css3 de derecha a izquierda transición de abajo hacia arriba transición

---

Consejo: El sistema realiza la transición de forma predeterminada de izquierda a derecha y de arriba a abajo.

1. Transición de derecha a izquierda

Idea: Lo principal es arreglar el div a la derecha, para que la transición solo pueda extenderse hacia la izquierda.

.ltr {
    
    
  width: 20px;
  height: 60px;
  background-color: pink;
  transition: width 2s;
  position: absolute;
  right: 0;
}

.ltr:hover {
    
    
  width: 200px;
}

representaciones

2. Transición de abajo hacia arriba

Idea: Lo principal es arreglar el div en la parte inferior, para que la transición solo pueda extenderse hacia arriba.

.down-up {
    
    
  height: 20px;
  width: 160px;
  background-color: rgb(85, 180, 187);
  transition: height 2s;
  position: absolute;
  bottom: 0;
}

.down-up:hover {
    
    
  height: 200px;
}

representaciones

Este artículo también escribió una versión avanzada , que realiza principalmente la transición de abajo hacia arriba o de izquierda a derecha cuando se organizan varios contenidos. Si estás interesado, puedes echarle un vistazo.