In an attempt to practice my transforms, I created a simple animation that moved three divs using absolute position and transformed each of them as well position to position. This worked just as expected without any flaws
However, whenever webkit browsers transform the divs, the divs no longer retain their ability to animate to the next color, they remain their original color (most of the time black)
Here's a jsFiddle
I attempted to fix the solution by giving a default div a background color, by applying a transform that did nothing, and adding !important to the new background color but none of the fixes worked. I know the keyframe is being reached because the elements still change transform and location, but the new background color is not applying
It works perfectly fine in the newest version of Firefox for me (when the comment is taken out)
Do I have an error I haven't seen? If not, are there any work arounds for this?
It looks like it's the issue appears when trying to animate both transform and the position (via left and top)
Try using just transform, here's a demo: http://jsfiddle.net/qA4V9/
Notice: percentages in the translate() function refer to the object's width and height, rather than its container like top and left, so you'll have to rethink those numbers (I used pixels)
Good news: it will have much better performance (especially on mobile)
http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
Related
I'm trying to set up an effect like telegrams chat scrolling, where there is a global gradient positioned relative to the screen (fixed), and any element that is at the top of the screen would be a different color than the bottom of the screen.
Scrolling elements in this container would effectively change the color of each item, but the color at any position on the screen is static.
I'm wondering what is the most efficient & flexible way I can achieve this? Two options I'm evaluating personally:
Using background-attachment: fixed and having giving all items the same background-image.
Using clip-path in some manner (although I have never used this property before).
However, I'm not entirely clear on how either of these would work, or if there is a better solution.
I tried to find an animated example but could only find a static example:
I'm trying to create a visual effect using CSS, which you can see here: http://jsfiddle.net/FL8Ug/
The problem at this point, is that when I use both border-top and border-bottom on the :after pseudo element, the edges become "jagged" (in Chrome).
When you remove the border-bottom for example, the top triangle (which is the top half of the right border) becomes much smoother.
I tried applying both -webkit-transform:translateZ(0) and -webkit-backface-visibility:hidden, which has fixed strange behaviour like this for me in the past, but to no result.
Does anyone know if there's a fix for this?
(I also noticed that in Firefox, the border is always jagged, also after removing the border-bottom.)
Note: I'd rather not use both the :before and :after pseudo elements, because I'm already using the :before for another effect.
I appear to have fixed this. For some reason it's only when you use three borders that it gets jagged but if you just use two it stays smooth. So I split your after in two and made a before for the third border.
Codepen of the solutionenter code here
What I'm looking to achieve is a "half way" shadow using CSS3 in replacement of an image.
Below is a slightly zoomed example of what I'm trying to achieve:
There are three elements involved here, as displayed below (scaled down):
So far I've tried placing a box-shadow on element A and then pushing a higher z-index on element C so that the shadow is only visible over element B, but couldn't replicate the half-way cut off.
Has anyone attempted to achieve this before, or is the outcome always going to be as 'hacky' as I think it will be?
Make sure you're setting a position on the elements you're applying a z-index to:
http://jsfiddle.net/Vxz9f/
I just faced same problem and fixed it the following way:
Give the C div a higher z-index
Make it overlap (cover/go over) the A div for 5px (or whatever your
shadow px amount is).
If u do that with the same color, you will hide the shadow perfectly and you'll get your half way shadow.
I have a bunch of tiles on a page that expand as the user mouses over them. The expanded one should have the highest z-index, and this works, but I need the z-index to remain until the size transition is complete. Is there a way to do this using CSS only, no JavaScript? Since I'm using transitions, I'm not too worried about compatibility here, I applied progressive enhancement correctly.
Here's a jsFiddle that demonstrates this. Mouse over A; it transitions out. Mouse off of it, however, and it falls behind B. I need it to stay in front of B until the transition completes. Is there an elegant way to do this?
You need to define the z-index, as well as animate it.
This works in Firefox (8.0.1) and Webkit.
You need to set z-index to transition too: http://jsfiddle.net/uHJwT/2/
Try using transitions like in http://jsfiddle.net/frozenkoi/YK52N/ (note the comments in the CSS section, for both the .item and .item:hover)
The trick is to use transitions for the z-index property too. You can set, for example, a value of 10 for the normal items and 11 for the hovered ones. You also have to use transition-delay so that the animation for moving the mouse out doesn't reset the z-index inmediately. Next, add a different value to transition-delay to the rule for :hover with a value of zero so that the z-index does update inmediately when the mouse goes into the item.
In short, .item has the transition for mouse out of the item and .item:hover the rules for when the mouse moves in.
Here's the one solution: http://jsfiddle.net/uHJwT/4/
Essentially, it uses another wrapper div that has sufficient width & height to cover animated surface - on hover, it elevates its z-index so that the animated div remains on top. Of course, this is not full-proof solution - it is based on the fact that typical hover off would be down movement and it works for that - but hover off in diagonal direction would not work. But seems to be a reasonable CSS only solution - I would rather used js to get a perfect one.
I'm trying to find out why this CSS3 transition affects the parent div:
http://jsfiddle.net/BpUqt/5/
I'm trying to move an object up inside a div without changing the height of its parent div.
But what happens is that the height of the box shrinks by 1px each time the transition begins/ends (with or without border)
While I want to use three of these in a row my content beyond begins to jump up too if the user hovers over these items very quickly.
Setting an fixed height is not an option since I'm working on an responsive layout.
Instead of animating margin (which means the box height needs to be recalculated, so rounding errors on partial pixels causes movement), use transforms.
Also, remember that IE10 has transitions, so use the ms prefix as well.
Have a look at http://jsfiddle.net/BpUqt/10/
Ok, here's a simple work-around. Simply add a negative margin and it works:
http://jsfiddle.net/BpUqt/12/
Here's how it actually looks like (minimal version):
http://jsfiddle.net/sSjQt/