Develop Reference

My website is taking so much CPU on my computer

I'm using django with pure css and js in this project and it seems that my website is consuming so much cpu, also i'm using a gradient animation with css:
body {
background: linear-gradient(to right, rgb(247, 85, 202), rgb(18, 103, 248));
background-size: 400% 400%;
animation: gradient 15s ease infinite;
}
.nav-link,
.navbar-brand,
.nav-link:hover,
.navbar-brand:hover {
background: linear-gradient(to right, rgb(247, 85, 202), rgb(18, 103, 248));
-webkit-background-clip: text;
background-size: 400% 400%;
color: transparent;
animation: gradient 15s ease infinite;
}
#keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
In addition i'm using an event listener to the whole document using Javascript:
document.querySelectorAll('.edit').forEach((button) => {
.
.
.
})
document.querySelectorAll('.filter-green').forEach(like => {...})

Your problem is the use of animation on gradient background - if just on the body element then on my system (Windows 10/Edge reasonably powerful laptop) I don't see so much CPU being utilised, but the GPU usage is very high (around 48%).
If I then bring in the animations on the other two elements which have animated backgrounds the GPU goes up to anything between 60% and 75%.
So start by deciding what really has to have an animated background. I suspect it's the body that you want to show this, and remove the animations from the other elements.
You still have high either CPU or GPU usage and your users will not thank you for such battery-flattening behavior.
I would suggest you either scrap the idea of animating this type of gradient or at minimum provide a way for your users to switch it on and off. In any case, pay attention to whether they have asked for a low-motion site - some people react badly to movement on the screen.
See MDN for info on accessibility and animation.

CSS Zoom effect on load - hide DIV/Image loading latency

I have a web site with a lot of images, I already have lazy-loading but I wish to add some
effects when the images loads
I was looking to reproduce the "zoom" effect when the image is "loading", something like here:
https://masonry.desandro.com/
Please, have a look at this one:
https://tympanus.net/Development/GridLoadingEffects/index8.html
You will notice that there is no effect when the image are already loaded.
I try to hide the 'load latency' when loading an image from the server.
Maybe the animation is not the right trick!
The goal is to have the load softer, now it loads like any image, but the effect is not very nice.
(you can check www.socloze.com for review).
Do you think we can do this in pure CSS (without JS)?

You can add initial animation:
.img-anim {
width: 100px;
height: 100px;
background-image: url('https://lh3.googleusercontent.com/proxy/Dv3m6UV5rC0KL0or-iOT-6i1I4i4I3CXNh-XU0WZ5-yG_vbYme6A8NhIasiwLon0td1DGbVFBDOEwi3LK7gegowFkjQEiJpPBg');
background-position: center;
background-size: 100%;
background-repeat: no-repeat;
animation-name: scale-in;
animation-duration: .4s;
}
#keyframes scale-in {
0% {
background-size: 0%;
}
100% {
background-size: 100%;
}
}
<div class="img-anim"></div>

You can create initial animation usings css but thats as far as u go, if you need things to pop up as you scroll down then check AOS

How to resize background image with CSS/JS

I have fullscreen website with background-image: no-repeat and background-size: cover style on it. I want to make animation that the background image will resize in 10 second to the right side of the page to 350px width and 175px height. It's even possible to do it?
body {
background-image: url(/image.png);
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
position: fixed;
}
I saw some webkit animation but there was problem with the background-size: cover style, so the animation doesn't work.
I tried :
$(function(){
$('body').one("mouseover", function() {
$('body').addClass('hover');
});
});
But it will resize the image instantly and move it to the right, I want to resize them linear.
Thank you very much guys! :-)

You could add something like this to your css:
body {
background-position: center center;
transition: background-size 10s ease-in-out, background-position 10s ease-in-out;
}
body.hover {
background-size: 350px 170px;
background-position: right center;
}
https://codepen.io/anon/pen/oPbqPm
The problem with this, is however, that it won't animate the sizing.

I would suggest you don't set the image as background. Instead, position the image behind all other elements using position and z-index properties. Once set, you can add the animation. For more details on using z-index and position attributes see the link below and "try it yourself" example:-
https://www.w3schools.com/cssref/pr_pos_z-index.aspenter link description here
You can then use css animation for resizing of the imgae.
TO learn how to add animation see this link:-
https://www.w3schools.com/css/css3_animations.asp

How can I prevent the stutter that occurs while transitioning background-image?

I am using background-size: cover; transition: background-image 4s; on an element and I have written some JS that changes the background-image property every 10 seconds.
The element transitions the background image in webkit browsers but the image shakes while transitioning.
How can I prevent that?
Here is a JSFiddle with an example of the behavior:
http://jsfiddle.net/michaelynch/x60gL1p6/

Instead of using background-size: cover;, use in % like background-size: 100% 190%;

How to Progressively highlight a chunk of text using jquery/js/css

The effect can be seen live at Webdesignerdepot.com . When you hover over the title of a post the title highlights progressively also when you remove the cursor from the title before the animation is complete the highlight rolls back to its original state.
I tried animating the background color, but the problem that I faced was background color extended the whole div even when text didn't completely filled the div.
I have been thinking of adding an extra div with a z-index less than that of the text and then animating its width, but it would fail since text can extend more than one line. If the resulting effect is to be achieved with the same process it will result in multiple divs making the program really complex.
I couldn't think of any other way of achieving this.
Any other workarounds/techniques I can use?

Use javascript console or firebug or something like that and it's really easy to get a website styles.
CSS
a {
background-size: 200.22% auto;
-webkit-background-size: 200.22% auto;
-moz-background-size: 200.22% auto;
background-position: -0% 0;
background-image: linear-gradient(to right, rgba(255,255,255,0) 50%, #ddd 50%);
transition: background-position 0.5s ease-out;
-webkit-transition: background-position 0.5s ease-out;
}
a:hover {
background-position: -99.99% 0;
}
HTML
<a>something</a>