animation happening before actually hovering element on page refresh

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

LVL 1
Black SulfurAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chris StanyonWebDevCommented:
I think you want the transition on the hover, not on the __circle.
Black SulfurAuthor 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.
Black SulfurAuthor Commented:
Price Your IT Services for Profit

Managed service contracts are great - when they're making you money. Yes, you’re getting paid monthly, but is it actually profitable? Learn to calculate your hourly overhead burden so you can master your IT services pricing strategy.

Black SulfurAuthor Commented:
Although it doesn't seem to do the same thing in the fiddle for some reason..
Black SulfurAuthor 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/
Chris StanyonWebDevCommented:
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.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Black SulfurAuthor Commented:
It's unfair how smart you are :)

That works perfectly. How did you come to the left and top margins of -7.5rem?
Black SulfurAuthor 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.
Chris StanyonWebDevCommented:
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.
Chris StanyonWebDevCommented:
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.
Black SulfurAuthor 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.
Chris StanyonWebDevCommented:
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.
Black SulfurAuthor 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/
Chris StanyonWebDevCommented:
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.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.