Hover button with delay

Question

In my agency's website, the buttons on the homepage have a small delay between hovering and I don't know what's causing this behaviour. Could you guys take a look? Aparticula

This is the code applied to it

.btn span {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 196px;
  height: 34px;
  background: #fff;
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}

Please help!

Is this really the only transition applied? ... I would check if there is anything other which adds delay to it ... with only this applied it should work as expected — Michel Engelen, Mar 09 '18 at 09:26
change `transition: all .5s ease-in-out;` to `transition: all 0s ease-in-out;` — Carsten Løvbo Andersen, Mar 09 '18 at 09:29
From the code of your website I can see that you apply a transition on the basic class `.btn` and one at `.btn:hover` with different values for the transition timing ... you should ditch the one at `:hover` to see if the delay persists ... also change `all` to the value you want to change ... it makes the transition faster asd well — Michel Engelen, Mar 09 '18 at 09:34
the reason behind that delay Gradients don't support transitions yet . read more from here. https://stackoverflow.com/questions/6542212/use-css3-transitions-with-gradient-backgrounds — Rajath Kumar PM, Mar 09 '18 at 09:42

score 3 · Answer 1 · answered Mar 09 '18 at 09:26

3

That because you have applied transition to all Remove this from your css

-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;

answered Mar 09 '18 at 09:26

Athul Nath

2,536
1
15
27

score 1 · Answer 2 · answered Mar 09 '18 at 09:48

Transition properties allow elements to change values over a specified duration, animating the property changes, rather than having them occur immediately.

For better understanding, check this out :

.box {
  width: 150px;
  height: 150px;
  background: #914969;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  -webkit-transition: background-color 2s ease-out;
  -moz-transition: background-color 2s ease-out;
  -o-transition: background-color 2s ease-out;
  transition: background-color 2s ease-out;
}

.box:hover {
  background-color: #ff9999;
  cursor: pointer;

<div class="box">Transition effects</div>

For the most part, the order of the values does not matter -- unless a delay is specified. If you specify a delay, you must first specify a duration. The first value that the browser recognizes as a valid time value will always represent the duration. Any subsequent valid time value will be parsed as the delay.

Some properties cannot be transitioned because they are not animatable properties. See the spec for a full list of which properties are animatable.

Hope this helps..!

Hover button with delay

2 Answers2