animation happening before actually hovering element on page refresh

Black Sulfur
Black Sulfur used Ask the Experts™
on
I have positioned a circle inside another element, in the centre of it and when I hover, a box-shadow should appear and it should move slightly. This works but for some reason when I refresh the page the circle moves from the bottom right corner very quickly to the centre. This movement is animated and only happens on page refresh. How can I prevent this?

<div class="col-1-of-2">
      <div class="bg-video">
        <div class="bg-video__circle">
          &nbsp;
        </div>
      </div>
</div>

.bg-video {
    position: relative;
    background-image: linear-gradient(rgba($color-primary, 0.8), rgba($color-secondary, 0.8)),  url(../img/hero.jpg);
    background-size: cover;
    height: 39rem;
    width: auto;

    &__circle {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate3d(-50%,-50%,0);
        width: 15rem;
        height: 15rem;
        border-radius: 50%;
        background-color: $color-white;
        transition: box-shadow .4s, transform .4s;

        &:hover {

            box-shadow: 0 1rem 2rem rgba(#000, .4);  
            transform: translate3d(-50%,-52%,0);
            cursor: pointer;

        }
    }
}

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
I think you want the transition on the hover, not on the __circle.

Author

Commented:
Yeah, I tried that but if I put it on hover then it hovers nicely but snaps back into position when I mouse out instead of reversing the transition smoothly. If I have the transition where it is then the animation is smooth on hover and when I move the mouse out. The only issue is that initial movement when I refresh the page which doesn't look good.

Author

Commented:
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
Although it doesn't seem to do the same thing in the fiddle for some reason..

Author

Commented:
Here is the transition on hover. You will see that it snaps back instead of transitioning like the previous one

https://jsfiddle.net/dsxmvchn/
Most Valuable Expert 2018
Distinguished Expert 2018
Commented:
OK. The issue you're having is because you are applying a transition to the transform, and you have a transform on the circle element, so that get's fired when you first load your page. It probably makes sense to remove the transform from the circle, and only have it on the hover. You'd need to tweak your CSS to centre the circle using negative margins, and then reduce the amount of transform on the hover. Something like this:

&__circle {
    position: absolute;
    left: 50%;
    top: 50%;
    transition: box-shadow .4s, transform .4s;
    margin-left: -7.5rem;
    margin-top: -7.5rem;
    width: 15rem;
    height: 15rem;
    border-radius: 50%;
    background-color: $color-white;

    &:hover {
        box-shadow: 0 1rem 2rem rgba(#000, .4);  
        transform: translate3d(0%,-2%,0);
        cursor: pointer;
    }
}

Open in new window

This was only the transform on the hover will be transitioned.

Author

Commented:
It's unfair how smart you are :)

That works perfectly. How did you come to the left and top margins of -7.5rem?

Author

Commented:
Just another quick one, if you want me to open another question I can. But, I seem to not be able to wrap my head around this initial state. For example when trying to add an opacity and changing the opacity on hover, the same thing happens in that when you refresh you see the animation quickly happen.

&__circle {
    position: absolute;
    left: 50%;
    top: 50%;
    transition: box-shadow .4s, transform .4s, opacity .4s;
    margin-left: -7.5rem;
    margin-top: -7.5rem;
    width: 15rem;
    height: 15rem;
    border-radius: 50%;
    background-color: $color-white;
    opacity: 0.5;

    &:hover {
        box-shadow: 0 1rem 2rem rgba(#000, .4);  
        transform: translate3d(0%,-2%,0);
        cursor: pointer;
        opacity: 0.8;
    }
}

Open in new window


And again if I try put the transition for it in hover then it doesn't look right.
Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
Haha. I think my wife would question that !!

When you position an element absolutely, it will position it by the top/left of the element, so when you set top: 50% / left: 50%, you're actually positioning the top/left of your circle to the mid point.

Your circle is 15rem high / wide, so we can use that to nudge it left and up by half that amount so the centre of the circle is positioned in the centre of your element.
Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
The reason the animation is happening when you first load up the page is because you're applying a transition on opacity AND you're setting the opacity, so the transtion fires.

Author

Commented:
Hmm. I want the opacity to be 0.5 when the page loads and 0.8 on hover. Which is what happens but yeah, it does that transition as the page loads.
Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
Not sure whether you've got something else going on in your code. I've just tried doing it and for me the opacity is set when I load the page, and only transitions when I hover.

Here's a working fiddle.

Author

Commented:
I tried it with my compiled code and it doesn't do it either. Not sure if it's something to do with my setup or what. I will have to try figure it out.. Thanks for all your help. Here is my fiddle and it doesn't do what my page does on my localhost with exactly the same code.

https://jsfiddle.net/5L7df918/
Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
Hmmm. Always a pain when the dev server doesn't do the same as the prod server. That's why it pays to match up the 2 as closely as possible, although in pure front-end terms, it really shouldn't matter.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial