CODEWITHSUNDEEP
csscss-transitionscss-animations
bmoneruxui
bmoneruxui

Reputation: 313

Transition Animation on Position Property

I'm attempting to animate a property of position, but can't seem to get it to work.

The non-hover CSS is:

background: rgba(0, 0, 0, 0.7);
position: absolute;
bottom: 0;
width: 100%;
-webkit-transition: all 1s ease;
        transition: all 1s ease;

And the hover is:

top: 0;
-webkit-transition: all 1s ease;
        transition: all 1s ease;

The animation isn't happening. What am I forgetting here?

Upvotes: 0

Views: 5683

Answers (1)

Ben Philipp
Ben Philipp

Reputation: 1877

1) You only need the transition in the basic rule (not again in the :hover rule) 2) you need a value that corresponds to the value you're trying to animate to in your :hover rule, like so:

https://jsfiddle.net/svArtist/70yw60b7/

#hoverme {
    background: rgba(255, 0, 0, 0.7);
    height:100px;
    position: absolute;
    top:50px;  /* THIS value will be animated to "0px" on hover   */
    width: 100%;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}
#hoverme:hover {
    top: 0px;  /*   magic happening here   */
}

without any further information as to what is supposed to change from which position, this is as far as we can help. (The relevant HTML code would be nice)

Upvotes: 1

Related Questions