Transition in CSS

Question

Transition in CSS

Navigation

#1 by (10 votes)

13

What I try to do is to leave a background shadow that goes from left to right. The background what it 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 works fine, but what I want to do and do not work out is that the transition is from left to right. How can I do it?

css3 css

asked by Shaz 28.02.2018 в 19:41

source

1 answer

Search data in an ArrayList of objects What is a Symbol for in JavaScript? (ES6)

score 10 · Accepted Answer

I do not know if I understood correctly, is this what you're 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 you want to keep the gradient then you can do it (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 of ease-out a bit so that the effect is better appreciated.