CODEWITHSUNDEEP
javascriptjqueryhtmlcss
wheelsman
wheelsman

Reputation: 21

Hover button with delay

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!

Upvotes: 2

Views: 674

Answers (2)

Kishor Velayutham
Kishor Velayutham

Reputation: 818

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

Upvotes: 1

Athul Nath
Athul Nath

Reputation: 2606

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;

Upvotes: 3

Related Questions