So i made a sticky navbar to stick on top of a page, on the page i have paragraps and elements that i give css like
.from-left{
transform: translateX(-80%); } .from-right{
transform: translateX(80%); } .from-left,.from-right{
transition: opacity 500ms ease-in, transform 1000ms ease-in;
opacity: 0; } .from-left.appear,.from-right.appear{
transform: translateX(0);
opacity: 1; }
I then use intersection observer to give them appear class so that they slide in. Works fine if firefox, chrome however makes my navbar not stick to the top until all the elements slide in into their place, once they slide in navbar sticks to the top and works. I got no clue why this works in firefox and not in chrome and how to fix it, guess i could make elements positions absolute and rewrite stuff but i would like to avoid that.
Related
I am currently building a css transition for an expandable component.
Now I add a scale(Y) transform on the element when opening (scale 0 > 1) or reverse the animation on close:
/*
* Animation: Slide In from Top
*/
.u-slide-from-top-enter-active,
.u-slide-from-top-leave-active {
transition-duration: $s-animation-duration-default;
transition-property: transform, opacity;
transform-origin: top;
overflow: hidden;
}
.u-slide-from-top-enter,
.u-slide-from-top-leave-to {
transform: scaleY(0);
opacity: 0;
}
.u-slide-from-top-enter-to,
.u-slide-from-top-leave {
transform: scaleY(1);
opacity: 1;
}
This works all great, but Now the element below in the flow in the DOM jumps from one position to the other.
I first thought I could animate the height, but this does not work, then I thought I could animate the max-height, but this would not work with a value of max-height: auto.
So my question:
If I open the the expandable, can I somehow add some transition classes to the following elements in the DOM to transition their position (although I don't set a position property explicitely.
I find some help here:
https://css-tricks.com/using-css-transitions-auto-dimensions/
But I don't want to use Javascript. If you see the javascript example you see the wanted behaviour, but I want it to make with css.
Thanks for inputs on that.
Cheers
In chrome my text appears blurry, I've tracked the issue down to my animation in my css file but I have no idea why it is causing this.
(make sure you open the image otherwise you don't see a lot of difference)
Enabled animation (blurry)
Disabling the animation (crisp)
I have tried a lot of options that I found on stack overflow but none solve my issue...
Chrome Font appears Blurry
CSS transition effect makes image blurry / moves image 1px, in Chrome?
WebKit: Blurry text with css scale + translate3d
Blurry text on Chrome when using CSS -webkit-transform
Chrome animation makes text blurry
Animation itself
#keyframes blink {
0% {
opacity: 0.2;
}
50% {
opacity: 1;
}
100% {
opacity: 0.2;
}
}
animation: blink 2s infinite;
Example of animation
i've solved the issue and it was because my wrapper component had position: relative; which somehow caused the rest to be blurry when the transform was applied.
Look for a parent that has the position:relative;
I'm a css newbie. How to flip an image linked to url on a html page (not background image) to show some text?
Alternatively for fade out,how to fade an image on hover? this is the code I tried, it doesn't work properly. It's fading the entire container with all the images instead of just 1 image at a time.
.withfadeout {
opacity: 1;
transition: opacity .2s ease-in-out;
-webkit-transition: opacity .2s ease-in-out;
-moz-opacity: 0.2;
}
.withfadeout:hover {
opacity: 0.25;
}
I removed the fadeout class but the site is still fading out everything.
Many thanks.
without jQuery. I think you should give an id to each image
jQuery make that easier.
I'm sure this is a pretty simple one but can't find the specific answer I'm looking for elsewhere.
Basically, I have a series of side by side images set out in a responsive grid layout. As you hover over each image it zooms and scales the image bigger so it looks like it's coming out towards you.
However, the issues I have is that the later image always overlaps the prior image. I have tried setting all the divs containing the image to the same z-index but to no avail.
I have setup a js.fiddle which demonstrates the issue. I'm hoping to solve with purely CSS.
JSfiddle link http://jsfiddle.net/Aloha_Design_Co/46poxw9j/
Any ideas would be most appreciated.
Thanks,
Heath
Simply, give more z-index in .photo-content:hover.
.photo-content:hover {
background-size: 120%;
/* in conjuction with the transition below it zooms in on the background image - doesn't change box size in itself; */
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
transition: all 0.5s linear;
transform: scale(1.2);
/* expands the box to look like it is 3D coming out of page */
/* Add z-index */
z-index: 10;
}
Jsfiddle
I have a very odd problem that I only observe with Safari, on a touchpad.
When scrolling down, my navbar fades in / down via CSS transition. If I happen to scroll back up, thus removing the class responsible for the transition, the navbar gets stuck visually in the wrong place, only on safari. The CSS / styles say the correct values, and even the hover/click handlers are in the right place.
That is, In the image below, my mouse is hovering at the blank white area, while the navbar stuck below gets highlighted.
There are several odd things about this:
The element is the navbar via global styles, yet only happens on this particular page.
I can't seem to trigger the problem via scrolling with the mouse.
I can only trigger it via very subtle trackpad movements, or fast trackpad movements.
Any suggestions on how to fix this?
Relevant CSS
.is-sticky-slide-down {
#include experimental(animation, fadeInDown .3s ease-out 0s);
}
#-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
The problem was due to enabling -webkit-backface-visibility: hidden on elements. Removing this "fix" for hover glitches (like twitching opacity fades) fixed the other glitches on Safari.
To be clear, the fix is to remove -webkit-backface-visibility from affected elements.