13

Lo que trato de hacer es quede una sombra de fondo que pase de izquierda a derecha. El background lo que hace es darle otro color de fondo, pero en vez de que aparezca , que se mueva. modifique todo. Ahora hice esto:

.Grupo {
  transition: all 0.5s ease-out;
  transition-timing-function: linear;
}

.Grupo:hover {
  background: #C7212F !important;
}
<div id="area-vulnerables" class="Grupo">
  <a href="" title="">
    <div class="area-icon">
      Contenido
    </div>
  </a>
</div>

Bien, hasta funciona todo bien, pero lo que quiero hacer y no me sale es que la transicion sea de izquierda a derecha. Como puedo hacerlo?

5
  • No esta claro lo que preguntas... se un poco mas descriptivo... Que esperas hacer?, como esperas que sea tu animación Commented el 1 mar. 2018 a las 15:43
  • Lo que trato de hacer es quede una sombra de fondo que pase de izquierda a derecha. El background lo que hace es darle otro color de fondo, pero envez de que aparezca, que se mueva. Se entiende?
    – user71533
    Commented el 1 mar. 2018 a las 15:48
  • 1
    Creo que entiendo, quieres hacer como esto... jsfiddle.net/75Umu/3 pero con el background, no? Commented el 1 mar. 2018 a las 16:07
  • 1
    @AlejoFlorez opino lo mismo Commented el 1 mar. 2018 a las 17:49
  • Claro, pero no lo estoy logrando
    – user71533
    Commented el 2 mar. 2018 a las 12:14

1 respuesta 1

10
+50

No sé si entendí bien, ¿es esto lo que buscas?:

.Grupo {
  background: linear-gradient(to left, white 50%, red 50%);
  background-position: right bottom;
  background-size: 200% 100%;
  transition: all 0.5s ease-out;
  transition-timing-function: linear;
}

.Grupo:hover {
  background-position: left bottom;
}
<div id="area-vulnerables" class="Grupo">
  <a href="" title="">
    <div class="area-icon">
      Contenido
    </div>
  </a>
</div>

Si lo que quieres es mantener el degradado entonces puedes hacer (gracias @delCano):

.Grupo {
  background: linear-gradient(to left, white, white, red, red);
  background-position: right bottom;
  background-size: 400% 100%;
  transition: all 2s ease-out;
  transition-timing-function: linear;
}

.Grupo:hover {
  background-position: left bottom;
}
<div id="area-vulnerables" class="Grupo">
  <a href="" title="">
    <div class="area-icon">
      Contenido
    </div>
  </a>
</div>

He aumentado un poco el tiempo del ease-out para que se aprecie mejor el efecto.

8
  • 2
    Si cambias tu degradado duplicando rojo y blanco (white, white, red, red) y aumentas el fondo al 400% conservas el efecto degradado además del movimiento.
    – delCano
    Commented el 9 mar. 2018 a las 15:34
  • @delCano cierto, en caso de que se quiera mantener el degradado. ¡Gracias!
    – César
    Commented el 9 mar. 2018 a las 15:54
  • 1
    Que interesante efecto, lo propongo como respuesta ;) Commented el 9 mar. 2018 a las 16:19
  • esta muy bueno ese efecto. creo que lo pondré en mis sitios. Commented el 9 mar. 2018 a las 17:54
  • CUIDADO: Parece que si pones las propiedades de CSS en otro orden ya no se hace el efecto. Ejemplo aquí. Commented el 9 mar. 2018 a las 18:37

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.