Home / Questions / 142250
Accepted
user71533
Asked: 2020-02-29 10:41:56 +0800 CST 2020-02-29 10:41:56 +0800 CST

transition in css

  • 772

What I'm trying to do is leave a background shadow that passes from left to right. What the background does is give it another background color, but instead of it appearing, it moves. modify everything. Now I did this:

.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>

Well, everything even works fine, but what I want to do and it doesn't work out for me is that the transition is from left to right. How can I do it?

css

1 Answers

  1. Best Answer

    I don't know if I understood correctly, is this what you are looking for?:

    .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>

    If what you want is to keep the gradient then you can do (thanks @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>

    I have increased the time a little ease-outso that the effect is better appreciated.

    • 10