CSS transition between left -> right and top -> bottom positions
Is it possible to use CSS transitions to animate something between a position set as left: 0px to right: 0px so it goes all the way across the screen? I need to accomplish the same thing with top to bottom. Am I stuck calculating the screen width / object-size?
So, what have you tried? What HTML are you working with? CSS, any JavaScript? Do you have a demo of what you’ve got so far.
In more modern browsers, you can also use calc() to determine positions, which helps by allowing you to do things like .moveto < left: calc(100% - 50px); >.
4 Answers 4
You can animate the position (top, bottom, left, right) and then subtract the element’s width or height through a CSS transformation.
.animate < height: 100px; width: 100px; background-color: #c00; transition: all 1s ease; position: absolute; cursor: pointer; font: 13px/100px sans-serif; color: white; text-align: center; >/* ↓ just to position things */ .animate.left < left: 0; top: 50%; margin-top: -100px;>.animate.right < right: 0; top: 50%; >.animate.top < top: 0; left: 50%; >.animate.bottom < bottom: 0; left: 50%; margin-left: -100px;>.animate.left.move < left: 100%; transform: translate(-100%, 0); >.animate.right.move < right: 100%; transform: translate(100%, 0); >.animate.top.move < top: 100%; transform: translate(0, -100%); >.animate.bottom.move
Click to animate left top bottom rightAnd then animate depending on the position.
How to make transition from bottom to top
I want to make the title and the content to move up to the right position on hover. The problem is that the transition on the Title class doesn’t work and the hover effect doesn’t work as well. What i tried to do is to change the hover so that when i hover over the ImageText class, both the Title and Content go to top: 0; and postion: relative; and this works but the transtion doesn’t work. But the problem here is that i should not hover over ImageText. What I should hover over is the Title class however when I try this, the transition doesn’t work.
.Section < display: grid; grid-template-columns: 1fr 5fr 1fr; transform: translateY(30px); >.Column2 < grid-column: 2; display: grid; grid-template-rows: 200px 200px 200px; grid-gap: 1em; >.two < grid-row: 2; display: grid; grid-template-columns: 1fr 1fr 2fr; grid-column-gap: 1em; >.ImageText < position: relative; background-size: 100%; color: white; overflow: hidden; transition: 0.5s; height: 100%; >.Title:hover+.Content < position: relative; top: 0; >.Content:hover < position: relative; top: 0; >/* .Title:hover < position: relative; top: 0; >*/ .Content:hover+.Title < position: relative; top: 0; >.Title < background-color: rgba(0, 0, 0, 0.6); font: caption; position: absolute; bottom: 0; width: 100%; transition: 0.5s; >.Content
SpaceX's Next Starship Prototype Taking Shape Construction of the test craft is proceeding apace, as two new photos posted on Twitter today (Sept. 17) by company founder and CEO Elon Musk reveal. NASA's Juno Mission Cheks Out Eclipse on Jupiter All is well on our largest neighbor; NASA's Juno spacecraft just managed to spot the shadow of Jupiter's moon, Io, passing over its marbled clouds. Europe Wants Ideas for Cave-Spelumking Moon Robots As NASA makes a big push to land humans on the moon's surface by 2024, the European Space Agency (ESA) wants to learn more about the lunar caves that lie beneath. The result should be, when you hover over the Title, both the Title and the Content should go up to top:0; and this effect should have transtion:0.5s; The solution should be with CSS not JavaScript. It is better to go to full page when running the code snippet so that you have better visualisation of the problem.
CSS Transition doesn’t work with top, bottom, left, right
Then I want to change its position smoothly after clicking on it, but when I add the style change the transition doesn’t take place, instead, the element moves instantly.
What might be the cause of this? Are there properties that aren’t ‘transitional’? EDIT: I guess I should have mentioned that this is not jQuery, it’s another library. The code appears to work as intended, styles are being added, but transition only works in the second case?
Assuming $$ is an alias for jQuery, doing [0] will return a native dom object (as opposed to a jquery object) and not have any .on() method. If not — what is $$?
None of that is valid, if you’re using jQuery there’s nothing called style(), and in native JS, it surely doesn’t work like that.
@Goldentoa11 top appears to be in the list, which eliminates my doubt about top not being available for transitions.
@php_nub_qq Check adaneo’s answer and my comment to it, by the looks of it you need to start out with a top value set (to 0 for instance) before you change it (to 200 or whatever)
5 Answers 5
Try setting a default value for top in the CSS to let it know where you want it to start out before transitioning:
CSS
position: relative; transition: top 2s ease 0s; /* only transition top property */ top: 0; /* start transitioning from position '0' instead of 'auto' */ The reason this is needed is because you can’t transition from a keyword, and the default value for top is auto .
It is also good practice to specify exactly what you want to transition (only top instead of all ) both for performance reasons and so you don’t transition something else (like color ) unintentionally.
Perhaps you need to specify a top value in your css rule set, so that it will know what value to animate from.
In my case div position was fixed , adding left position was not enough it started working only after adding display block
Something that is not relevant for the OP, but maybe for someone else in the future:
For pixels ( px ), if the value is «0», the unit can be omitted: right: 0 and right: 0px both work.
However I noticed that in Firefox and Chrome this is not the case for the seconds unit ( s ). While transition: right 1s ease 0s works, transition: right 1s ease 0 (missing unit s for last value transition-delay ) does not (it does work in Edge however).
In the following example, you’ll see that right works for both 0px and 0 , but transition only works for 0s and it doesn’t work with 0 .
#box < border: 1px solid black; height: 240px; width: 260px; margin: 50px; position: relative; >.jump < position: absolute; width: 200px; height: 50px; color: white; padding: 5px; >#jump1 < background-color: maroon; top: 0px; right: 0px; transition: right 1s ease 0s; >#jump2 < background-color: green; top: 60px; right: 0; transition: right 1s ease 0s; >#jump3 < background-color: blue; top: 120px; right: 0px; transition: right 1s ease 0; >#jump4 < background-color: gray; top: 180px; right: 0; transition: right 1s ease 0; >#box:hover .jump
right: 0px
transition: right 1s ease 0s right: 0
transition: right 1s ease 0s right: 0px
transition: right 1s ease 0 right: 0
transition: right 1s ease 0 CSS transitions between absolute and relative positioning
Is it possible to combine position: relative and position: absolute with smooth CSS-transitions? I’m creating a small widget (I call it a Deck), which I wan’t to have a collapsed and expanded state. All well so far, this is working fine. Switching between the two states naturally warrants a transition animation. This is working too, but not the way I would like it to. I Want to use CSS-transitions, instead of using absolute positioning and JavaScript, like I am currently. The current scenario is: in expanded state the cards in the deck are always positioned absolutely, their position being calculated on the fly as they are added to the deck. When collapsing, the first four are stacked in a cascading manner and the rest on top of the fourth card. Visually mimicking a pile or stack. The problem with this approach, is that I can’t rely on normal layout flow for positioning the cards, which sucks for many reasons. If I use position: relative for the cards in expanded state, they flow nicely one after another. But the transition to collapsed state is not being animated — simply snapping from one position to the other in an instant. This is of course logical since without absolute positioning in the first place, the browser doesn’t know whence from the transition should start. In my perfect world, adding the class collapsed to div.deck-container would animate the cards into their collapsed positions and vice versa, but it seems this isn’t possible. Please someone tell me I’m wrong.
$('button#toggler').click(function() < $('div.deck-container').toggleClass('collapsed'); >);div.deck-container < position: relative; >div.deck-container li < display: inline-block; position: relative; transition: all 0.5s ease-in-out; border: 1px solid black; padding: 3px; background-color: #fff; >div.deck-container.collapsed li < position: absolute; left: 9px; top: 6px; >div.deck-container.collapsed li:first-child < left: 0; top: 0px; >div.deck-container.collapsed li:nth-child(2) < left: 3px; top: 2px; >div.deck-container.collapsed li:nth-child(3) < left: 6px; top: 4px; >button
2 Answers 2
No, you can’t animate the position property. There are only a number of css properties you can animate, and most of them have numbers or colors as values (With some exceptions). You can see this list in the w3c css transitions especification.
Anyway, since you can animate top and left properties, you could change your markup a little to achieve the effect.
I just set the original position to absolute and positioned those elements. Then, when toggling the class, only top and left attributes change, so the transition works.
$('button#toggler').click(function() < $('div.deck-container').toggleClass('collapsed'); >);div.deck-container < position: relative; >div.deck-container li < background-color: #fff; position: absolute; border: 1px solid black; padding: 3px; display: inline-block; transition: all 0.5s ease-in-out; >div.deck-container li < left: 160px; top: 0px; >div.deck-container li:first-child < left: 0px; top: 0px; >div.deck-container li:nth-child(2) < left: 40px; top: 0px; >div.deck-container li:nth-child(3) < left: 80px; top: 0px; >div.deck-container li:nth-child(4) < left: 120px; top: 0px; >div.deck-container.collapsed li < left: 12px; top: 8px; >div.deck-container.collapsed li:first-child < left: 0; top: 0px; >div.deck-container.collapsed li:nth-child(2) < left: 3px; top: 2px; >div.deck-container.collapsed li:nth-child(3) < left: 6px; top: 4px; >div.deck-container.collapsed li:nth-child(4) < left: 9px; top: 6px; >button