Certes Certes - 4 months ago 11
CSS Question

Transition - Fading out and webkit syntax

This button fades in properly but instead of fading out when no longer hovered over it clips off
Also, what is needed to be done for this to work on safari?

Here's my code:



.iob:hover {
text-shadow: 0 0 10px green;
transition: .25s;
transition-duration: 0.25s;
transition-timing-function: ease-in-out;
}
.iob {
cursor: pointer;
margin-left: 30px;
padding: 8px 18px;
color: #52AEC9;
}

<a href="https://www.google.com/?gws_rd=ssl" style="text-decoration:none;" target="_blank">
<p class="iob">Information</p>
</a>





Thanks!

Answer

SOLUTION::

You need to change your transition property to your element's normal state.


EXPLANATION:

I have previously explained the diference in this post:

What is the difference between applying CSS transition property in hover rather than in its normal state?


SIDE NOTE:

I recommend you remove the inline-style in the <a> tag and style it in your CSS external file for a better maintainability and separation of concerns. Do the following:

Replace:

style="text-decoration:none;"

With:

.iob-anchor,
.iob-anchor:hover{
  text-decoration: none;  
}

CODE SNIPPET:

.iob-anchor,
.iob-anchor:hover{
text-decoration: none;  
}

.iob {
  cursor: pointer;
  margin-left: 30px;
  padding: 8px 18px;
  color: #52AEC9;
  transition: .25s;
  transition-duration: 0.25s;
  transition-timing-function: ease-in-out;
}

.iob:hover {
  text-shadow: 0 0 10px green;
}
<a class="iob-anchor" href="https://www.google.com/?gws_rd=ssl" target="_blank">
  <p class="iob">Information</p>
</a>

Comments