I've been experimenting with CSS transitions lately, and I keep running into an issue when making shrinking headers.
In my example, the script C and The Corbo Group are both transparent PNGs. I'm adding a shrink class through jQuery and using CSS transitions to handle the animation.
When the transition completes, there is around 1 second of pixelation before the browser anti-aliasing completes. Is there any way to prevent this?
I've tried using transform: translate3d(0, 0, 0);
But that seems to cause the image to stay in the pixelated state.
Here's an example of my css
header img.corbo-c {max-width:118px; margin:20px 0 0 -38px; transition:all 0.25s ease;}
header.shrink img.corbo-c {max-width:60px; margin:10px 0 0 -20px; transition:all 0.25s ease;}
Pen Demonstrating Issue:
http://codepen.io/roachdesign/pen/BoOGYy
Related
So I've been trying this form challenge involving using no JS for interactive elements and I decided to make it 'fancy'. On click, the form drops and the arrow rotates; however, you can notice a jump in the pixels. I've viewed the box model several times and all of the pixels add up - I have no idea where this jump comes from. The only way to stop it is to make the arrow absolute, but it still isn't making sense why exactly that's happening if there's no shift in the layout. Any ideas?
https://codepen.io/mtbroomell/pen/zeMYdb
.ins {
display: block;
text-shadow:
20px 0 0 rgba(255,0,0,.6),
-20px 0 0 rgba(0,255,0,.6),
0 20px 0 rgba(0,0,255,.6);
font-size: 200px;
line-height:1;
color: transparent;
transform: rotate(0deg);
transition: .5s;
}
.form-toggle:checked ~ .ins-wrap .ins {
text-shadow:
0 0 0 rgba(0,0,0,.5),
0 0 0 rgba(0,0,0,.5),
0 0 0 rgba(0,0,0,.5);
transition: .5s;
transform: rotate(90deg);
}
^^^ The above is some of the sample styling as I'm not allowed to post CodePen without code.
I'm going to preface this by saying it seems quite smooth to me on a 2017 Macbook Pro using Chrome 72.
That said, almost all CSS animation jankiness on basic transforms can be improved by tricking the browser into using the GPU thread to render the element instead of the CPU. You can do that by forcing a 3d transform.
.animatedElement {
transform: translateZ(0);
}
Flickers and jumps in Chrome and FF can often be fixed with backface-visibility and perspective. Remember to use browser prefixes or a build tool that adds them.
.animatedElement {
backface-visibility: hidden;
perspective: 1000;
}
On their own, these don't do anything visually but they trick the browser renderer into doing some additional calculations.
I'm not sure what the native frame rate for css animations is but it's not fast enough. In animation the minimum frame rate needed to create the illusion of seamless movement is 24 fps. Using a requestanimationframe() would bump it up to 60 but then you'd need JS. I found this article on medium about CSS smooth animations. Might help? https://medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108
So I've done a lot of researching regarding this problem especially going through and trying all of the stuff in this thread:
https://stackoverflow.com/questions/15464055/css-transition-effect-makes-image-blurry-moves-image-1px-in-chrome#=
However, filter:blur(0); transform:translateZ(0) only work on laptop screens and not normal IPS flat screens. You still see the shifting and blurring of text. Does anyone have a solution that works for both laptop, normal monitors and across browser ? Below is an example of what happens on normal monitors, notice the shifting of the icons vertically. Below that is the code we're using.
.article-catalogue {
transition: transform .3s ease, box-shadow .3s ease,border .3s ease;
filter: blur(0);
image-rendering: -webkit-optimize-contrast;
transform: translateZ(0);
}
.article-catalogue:hover {
transform: perspective(1px) translateZ(0) scale(1.02);
box-shadow: 0px 12px 40px -10px rgba(51,51,51,.2);
}
One thought, could it be the rollover elements within the card causing the problem ?
I'm experimenting a "zoom and blur" css effect. So when I hover over an image, it's supposed to blur out and scale a bit, while contained in a div with overflow:hidden.
However, when running in Chrome, there's always a weird glitch. A blurry white border shows up around the container while the transition is going.
I'm wondering if there's a better way of doing it? Or a method of circumventing it? Thanks a lot!
You can see a gif demonstrating the problem: http://imgur.com/SrK5rXq
And the same code running in firefox as a comparison: http://imgur.com/942LBKV
Note the borders within the image.
And below is my code:
<style>
#img0{
width:500px;
height:auto;
}
.hoverBlur{
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
}
.hoverBlur:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
transform:scale(1.1);
-webkit-filter:blur(15px);
-moz-filter:blur(15px);
filter:blur(15px);
}
.container{
margin:200px;
width:500px;
height:333px;
border:1px solid #ccc;
overflow:hidden;
}
</style>
<div class="container">
<img id="img0" src="test.jpg" class="hoverBlur"/>
</div>
This is a REALLY old thread but I ran into this issue and couldn't find the solution published anywhere else so I'm posting it here:
You can fix this by adding a margin to the image that is the same size as the blur size (in this case 15px) then transform: translating the image back into place.
https://jsfiddle.net/zeojxtvb/
So in our example, a blur(15px) is applied to the image. So also apply the following to the image:
img {
...
margin: 15px;
transform: translate(-15px, -15px);
}
Ok guys, I have this in the style.css of my website.
.asia{
margin-left:40px;
background-image:url('../resources/img/asia.jpg');
width:100px;
height:75px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.asia:hover{
background-image:url('../resources/img/asia2.png');
width:100px;
height:75px;
}
these are two images, that I will use on my homepage by putting
<div class="asia"></div>
and everything is set for them to show up like an animation when hovering over.
The only problem is that on the laptop everything works fine, the index.html shows me all the images and the hover efect works well but when uploading and testing it on the server the images do not show up.
What is the problem? What am I doing wrong?
Could I make a suggestion, instead of having two files, perhaps combine them into one image.
Then, on hover you can update the background-position. This way, your document won't need to request another file from the server (good for people on mobile, and conserving downloads) as well as preventing a 'flicker' while the page hangs without its file and loads it in. Here's an example of the implementation.
.imageContainer {
background: url('../resources/img/asiacombined.jpg') no-repeat 0 0;
}
Let's assume the image is 100px tall.
.imageContainer:hover {
background-position: 50px /*x axis, shifting to the top of the next image in the file*/ 0 /* Y axis */;
}
Hopefully this helps.
Ps.
You can also use top, left, right, center, bottom to align content.
How to make images move automatically + on mouseover in CSS/HTML?
For example Ek Main Aur Ekk Tu Movie Site
It's actually really easy to do with CSS3:
.moveMe
{
width: 150px;
height: 40px;
background: #f01;
position: absolute;
top: 0;
-webkit-transition: top 2s;
-moz-transition: top 2s;
-o-transition: top 2s;
}
.moveMe:hover
{
top: 10px;
-webkit-transition: top 0.3s;
-moz-transition: top 0.3s;
-o-transition: top 0.3s;
}
This tells the element onHover to transition between the two states of top over a period of 2 seconds and 0.3 seconds when the mouse leaves.
Check it out here: http://jsfiddle.net/HGjQC/'
As this is a CSS3 technique, the code here will only work in webkit browsers (Chrome, Safari, any other browser using the Chromium engine [Rockmelt]), Opera and Mozilla browsers.
For IE, yoy'll probably need to use Javascript for now until MS decides to implement more CSS3.
It uses something called parallax effect. I found a jquery plugin that seems to help do this kind of effects. The plugin is called Plax, here is the demo
you could make an invisible div, and then use the query .attr() tag to change the image on hover. I'm not sure I get your question though, because I couldn't find the site that wanted to base yours off of.
Maybe you can use JavaScript, like this:
http://jsfiddle.net/HGjQC/2/