Transition - Fading out and webkit syntax

Question

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!

score 0 · Answer 1 · answered Jul 07 '16 at 20:56

0

Your transition should be added to the main class like this

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

answered Jul 07 '16 at 20:56

KANAYO AUGUSTIN UG

2,078
3
17
31

This is causing my elements to move when the page is loading – Jul 07 '16 at 21:02
I mean you should take away the transition from the `:hover` entirely – KANAYO AUGUSTIN UG Jul 07 '16 at 21:08

score 0 · Answer 2 · answered Jul 07 '16 at 21:00

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

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

you can write transition: 2.5s ease-in-out; OR transition-duration…

I made the duration a lot longer so you can see it better. works fine in safari 9.x. If you wanna know more about transition css-tricks.com has all the you need to know. https://css-tricks.com/almanac/properties/t/transition/

score 0 · Accepted Answer · edited May 23 '17 at 12:24

0

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>

edited May 23 '17 at 12:24

Community

1
1

answered Jul 07 '16 at 21:10

Ricky Ruiz

25,455
6
44
53

http://codepen.io/Certes/pen/yJXQwE ~ Doing this causes my elements to fade into position when the page is opened, this was intended for the title but how I do I prevent this from happening for my buttons? – Jul 07 '16 at 21:16
I can't reproduce what you're saying. Is this behavior happening in the codepen you provided? – Ricky Ruiz Jul 07 '16 at 21:27
Yes, however im not able to replicate it using crossbrowser testing – Jul 07 '16 at 21:31
Which browser are you using? – Ricky Ruiz Jul 07 '16 at 21:33
Firefox latest version -EDIT- This is not happening in my local chrome browser – Jul 07 '16 at 21:33
I've no idea why this is happening, from now on I'll be using chrome as my default browser. – Jul 07 '16 at 21:47
I downloaded the latest version of Firefox and I still can't reproduce that problem. Can you try removing the :active state on boi and iob that has top: 2px; – Ricky Ruiz Jul 07 '16 at 21:54
Removing that doesn't change anything, its probably one of my addon's interfering. Speaking of the 'active' mechanic is it possible to get that working? It doesnt move up when I click it. – Jul 07 '16 at 22:16
Yeah the transition is not the problem. And yes it is possible, remember that by default elements have position: static, you need to specify position: relative in both your buttons for you to be able to set top, bottom, left and right properties. If you want the button to move up you would need bottom: 2px though, instead of top: 2px; – Ricky Ruiz Jul 07 '16 at 22:59

Transition - Fading out and webkit syntax

3 Answers3