I realize that css animations are a well covered topic, but I'm just wondering about the best way to create simple slide like transitions? Mostly, when you read about slide transitions like that, some kind of position:absolute is assumed. That is not the way content is usually organized in HTML and it shouldn't be.
So, if I want to create a transition of one div sliding to the left and one div sliding from the right, what would be a good strategy without assuming that any of those divs has absolute positioning or any other specific transition specific stuff going on to start with?
<div class="container">
<div class="this-should-slide-left">
<div>Some content</div>
<div>Some more</div>
</div>
<div class="this-should-from-left"><!--not visible initially-->
<div>Some more content</div>
</div>
</div>
I came up with this solution which seems to work, even though I'm not sure if it's elegant:
http://jsfiddle.net/CAg4f/4/
The best way to move elements around when animating is translating using css transforms.
For example, to transition when hovering over the container:
.this-should-slide-left,
.this-should-from-left {
transition: transform .25s
}
.container .this-should-from-left {
transform: translateX(100px);
}
.container:hover .this-should-from-left {
transform: translateX(0);
}
.container:hover .this-should-slide-left {
transform: translateX(-100px);
}
Translating makes the transition much smoother as it takes advantage of hardware acceleration plus there is no positioning involved, so you have complete separation between the design of the layout and the design of the animation itself.
Read more here
Aside from absolute positioning, there is relative positioning and margins.
While I would usually go with margins to manipulate a transition, relative positioning is probably the safest, as it will work for inline elements which can't necessarily be manipulated by margins.
Related
I have an absolutely positioned form that appears roughly 200px below where it should be on the page load. If I open up Chrome Dev Tools and disable and re-enable any CSS image it goes where it should be.
This only happens in Google Chrome.
I've tried using the chrome specific CSS rules below but it doesn't work.
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0);
How can I fix this?
Here is the page in question: http://info.iconixx.com/Iconixx-Incentives_imc_incentives1.html
It's likely nested in a different element then your wanting it to be. Make note of the parent element.
Find the element in which that header image is coming from. Likely <header></header>
Then make sure that element is defined as position: relative;
Within those tags have the relevant mark-up of the element you are trying to position within this area.
<header>
<div id="absoluteelement">
</div>
</header>
Now when you do:
#absoluteelement {
position:absolute;
top:50px;
left: 200px;
// more
}
It will be positioned top and left coordinates from the parent element, so top and left from the top and side of <header> just double check your code and nesting. Also, make sure you have all widths and heights defined for that area. Hope this helps.
I think you should really take a look how your markup is structured and consider reformatting it. For 1 the left box in the banner comes after the Form which is on the right. Just like anything else you should build left to right.
<div id="banner">
<div id="left_content"></div>
<div id="right_form"></div>
</div>
You could then....
#left_content{ float:left; }
#right_form{ float:right; }
This isn't going to give you the exact look you want... but using this approach will really help eliminate thse types of issues to begin with.
How to force browser NOT to calculate the size of the content based on some absolute positioned elements?
I am looking for something like https://developer.mozilla.org/en-US/docs/CSS/-moz-stack-sizing
For a simplistic use case please view http://jsfiddle.net/edzis/5nnYk/
html, body, .container {
/**
https://developer.mozilla.org/en-US/docs/CSS/-moz-stack-sizing
DOES NOT WORK
**/
-moz-stack-sizing: ignore;
-webkit-stack-sizing: ignore;
stack-sizing: ignore;
}
This may not be an exact match to what you are looking for, but maybe it can present some ideas.
If you can change the html code, you could make use of "overflow: hidden" by using a second absolute positioned layer and let the "container" div only be responsible for the dimensions where you want to have scrolling.
NB: There is a possible issue here if the initial window width is small and the container causes scrolling, the elements off screen may not be rendered and will require refreshing.
Here's an updated jsfiddle link: http://jsfiddle.net/5nnYk/24/
code e.g:
<div class="panel">
<div class='left'>LEFT</div>
<div class='right'>RIGHT</div>
</div>
<div class='container'>
</div>
Then set the panel class to:
.panel{
width:99%;
height:200px;
position:absolute;
z-index:1;
overflow:hidden;
-webkit-transform-style: preserve-3d;
}
BTW: I set width to 99% instead of 100% because it fixes another issue that sometimes rises and causes a horizontal scroll. Another way to solve this is use left: 0px; on the panel.
The problem is that the 2nd article (.settings) should be rotated 360° and so its backface should be shown. (This even works if I delete the overflow in the .flip)
The only thing I can see is the frontside flipped 180 on Y axis
Possibly a bug in chrome?
PS: Yes I want the 'Really long text node display?' see as it isn't turned at all.
HTML:
<article class="flip fliped anim" style="min-height: 308px;">
<article class="settings fliped">
"Text longer than 2nd article"
</article>
<article>
...
</article>
</article>
CSS:
.flip article{
overflow: hidden;
-webkit-backface-visibility: hidden;
}
.fliped{
-webkit-transform: rotateY(180deg);
}
http://jsfiddle.net/LatpP/1/
i had a hard time fixing your code, i also found some duplicate properties, so i decided to rewrite it from scratch since i think i got what you want to achieve.
basically you dont need to go from 360 to 180 you can just go from 180 to 0 and if you need another rotation from 0 to -180 ;)
when you put the same class which has a 180deg rotation on parent and child divs like this:
<article class="flip fliped anim" style="min-height: 308px;">
<article class="settings fliped">
.fliped {
-webkit-transform: rotateY(180deg);}
what you got is the sum of degrees, that is 360 which equals to 0! also you don't always have to specificate when a div is at 0deg since this is by default.
so here is the code i wrote, the animation triggers on hover (i commented the class involved in this).
i also added another wrapper to keep the perspective more realistic, if you dont like it just delete the very first class.
if you want to see the static backface only (as you asked) you just have to add the .hover class to the .flip-container div without messing with your css, like this:
<div class="flip-container hover" >
EDIT
i forgot about the overflow issue which is easily solved by applying the overflow:hidden; property directly to the last single container of your markup. in my case directly to .front or .back divs (or both). here is the final Fiddle updated for your needs.
Maybe it's a strange question since I don't wanna know 'how' but 'why', but I think the answer might be valuable for those who wish to understand the way css works better.
I'm trying to make each div on my page reveal an 'x' div which will allow the user to close that div. There are several dynamically created divs.
I have this (dynamic) html:
<div class="box">
<div class="x">X</div>
</div>
<div class="box">
<div class="x">X</div>
</div>
[the number of 'box' divs varies]
And this css:
.x {
visibility: hidden;
}
.box:hover .x {
visibility: visible;
}
I really didn't think this could work but somehow it does:
jsFiddle
But how does this simple css code 'knows' which x div should be revealed, where there are no ids to distinct the 'box' divs nor the 'x' divs?
Because it looks for the descendent .x
So when you hover over box 2 it applies the :hover and according to the css rule the .x that's inside the .box with the :hover should be visible.
Wouldn't really know how to explain it differently :P
Take this dom as an example.
<div id="container" style="transition: width 1s ease-in-out;">
<div style="width: 400px; display: none;"></div>
<div style="width: 200px;"></div>
</div>
If I alternate which inner div is hidden, can I trigger the CSS3 transition (via reflow)? If this were possible, I could add many inner divs and alternate between them smoothly without having to know what size they were.
I wouldn't think it's possible via CSS alone - transitions are not inheritable, so they would have to be applied to the nested elements in question, and a width transition couldn't be applied without the width anyway so e.g. the nested div would need it's width and 0 set to transition between them either on a hover or a JS click or some event
however I think I really am failing to understand the question;
#container div {transition: width 1s ease-in-out;}
would apply it to all child divs then you just toggle the display and width however you're thinking of doing it anyway?