css animation

i have a position absolute element which has this:

top: 20px !important;
left: -5px !important;

top: 20px !important;
left: -5px !important;

earlier it was:

top: 0;
left: 0;

top: 0;
left: 0;

earlier it had a animation of this:

@keyframes infoWindowAnimate {
    0% {
        opacity: .5;
        top: 16px;
    }

    50% {
        opacity: .75;
        top: -6px;
    }

    100% {
        opacity: 1;
        top: 0;
    }
}

@keyframes infoWindowAnimate {
    0% {
        opacity: .5;
        top: 16px;
    }

    50% {
        opacity: .75;
        top: -6px;
    }

    100% {
        opacity: 1;
        top: 0;
    }
}

what should be the updated animaton for the updated top and left values?

9 Replies

Jochem•2y ago

don't crosspost your questions @curator

Kevin Powell•2y ago

Impossible to say without more information, it completely depends on what you want the animation to do, and where you want it to end up... the start and end are two different things so 🤷 I will say though, that it's better not to animate the top property, and instead animate where it is with translate instead though.

curatorOP•2y ago

this was the original animation with the original these:

top: 0;
left: 0;

top: 0;
left: 0;

curatorOP•2y ago

this is what now after changing top and left to these:

top: 0;
left: 0;

top: 0;
left: 0;

curatorOP•2y ago

need the exact same animation like this but while changing the values, always something goes wrong also thanks for replying kevin this is the latest animation:

@keyframes infoWindowAnimate {
    0% {
        opacity: .5;
        top: 36px;
        left: -15px;
    }

    50% {
        opacity: .75;
        top: 14px;
        left: -11px;
    }

    100% {
        opacity: 1;
        top: 20px;
        left: -5px;
    }
}

@keyframes infoWindowAnimate {
    0% {
        opacity: .5;
        top: 36px;
        left: -15px;
    }

    50% {
        opacity: .75;
        top: 14px;
        left: -11px;
    }

    100% {
        opacity: 1;
        top: 20px;
        left: -5px;
    }
}

also @Kevin any resource where i can learn animations?

Kevin Powell•2y ago

The left value is different for each keyframe, so it's going to move around. I'd probably keep that the same for all the keyframes. The 0% one has a top of 36, then it goes to 14, then 20, so it's going to move up and down too. The easiest might be to simply remove the 50% one all together. Also, the animation will run, then it'll go back to wherever it started, might be a good idea to add forwards to when you declared the animation... I'd put forwards instead of infinite, infinite is only if you want the animation to keep playing over and over again. I'm not sure about a specific course though, sorry

curatorOP•2y ago

got it working, not accurate, but looks good, had to change the orignial values, playing with google maps kinda tricky thank you well you are The Kevin Powell! you can come up with something, will love to learn by you

Gaming

Programming

css animation