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.
Related
As others have pointed out, CSS animations might get stuck or pause inadvertently because of performance issues, for example a busy JavaScript main thread, like CSS Animation, State change finish animation.
In the context of a webpage using existing third-party libraries or frameworks, we might have no control over the whole web app, so we cannot guarantee that the JavaScript behaves properly.
As there seems to be no way to increase an animation's priority over other browser tasks, and there seems to be no way to decrease the priority of browser tasks initiated by JavaScript so that CSS-initiated tasks are preferred either, and that may have unintended consequences as well, I want to focus on controlling the animation itself.
So, my questions are:
Is there a way to tell the browser, preferably using only CSS, that the animation should rather drop some frames to guarantee to reach the final state in time even if there are performance problems?
If so, can we use CSS animation syntax only, or do we need to use other techniques such as requestAnimationFrame() or complex libraries like GSAP?
Perhaps, there is something like a combination of animation-fill-mode and text-rendering: optimizeSpeed; but to control what to optimize when rendering animations, but I have searched and have not found anything helpful.
What I have tried so far:
.drawer {
position: fixed;
left: 100%;
transition: transform 3s;
background: blue;
}
.drawer.open {
transform: translateX(-400px);
animation-name: slidein;
animation-duration: 3s;
animation-fill-mode: forwards;
}
#keyframes slidein {
0% { transform: none; }
25% { transform: translateX(-100px); }
50% { transform: translateX(-200px); }
75% { transform: translateX(-300px); }
100%{ transform: translateX(-400px); }
}
<div class="drawer" id="drawer">drawer</div>
show drawer
Although, this is supposed to be a minimal reproducible example, the bug is hard to reproduce when taken out of context. Please try to use CPU throttling in developer tools to see what I mean.
.drawer {
position: fixed;
left: 100%;
transition: transform 3s;
background: blue;
}
.drawer.open {
transform: translateX(-400px);
animation-name: slidein;
animation-duration: 3s;
}
#keyframes slidein {
0% { transform: none; }
25% { transform: translateX(-100px); }
50% { transform: translateX(-200px); }
75% { transform: translateX(-300px); }
100% { transform: translateX(-400px); }
}
<div>
<div class="drawer open" id="drawer">drawer</div>
show drawer
</div>
I am currently going through a website's banner via chrome developer tools(Inspect). I noticed that a particular banner has the following ruleset in its CSS:
banner{
background-position:bottom;
background-position-x: center;
background-position-y: center;
}
Is this just a formality?. Because, when I removed the three background properties and set background-position: center, the banner wasn't affected in any way.
From a developer wannabe. Thanks
That banner just has bad CSS.
background-position is a shorthand for, background-position-x and background-position-y.
So,
banner {
background-position: bottom;
background-position-x: center; /* This is not doing anything, because x became 'center' when it was omitted above. */
background-position-y: center; /* This will override the previously set 'bottom' */
}
As you mentioned, background-position: center does the same job, since both x and y will be 'center'.
There's nothing wrong with using keywords, but if you're just starting with CSS, I strongly recommend you to get used to using percentages.
(You'll thank me later when you need more specific positioning using calc().
background: 0% 100% = background: left bottom
background: 100% 0% = background: right top
background: 50% 50% = background: center center
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
Here is my CSS:
div.movement {
background-image: url('image.png');
background-repeat: repeat;
background-size: contain;
animation: 60s linear 0s infinite alternate moving-background;
}
#keyframes moving-background {
to {
background-position: 2000% 0%;
}
}
The background moves constantly when I load the webpage in regular mode. However, it stops moving as soon as I go fullscreen by pressing F11. I have tried both Chrome and Firefox and both behave in the same way.
Is there any way to animate a background image's position in full-screen mode? I would prefer a CSS-based solution but I am open to using JavaScript as well.
Can someone tell me anything about gate animation and zoom page transition from this Unicef web, I want to try to make this cool animation. At least give me "keyword" how to find it. Are those made with html5 ?
In the Unicef animation the developers are using a mix approach of JavaScript using GSAP JS library and CSS Transitions.
You can have a looks at their code in bundle.js and screen.css files using Chrome developer tools.
Generally you can use:
CSS Keyframe Animation
CSS Transitions
JavaScript vanilla or some libraries
Web Animation API
to animate DOM elements in your HTML page.
To help you to get started I have created a simple scale/zoom effect using CSS Keyframe Animation, but you can reach a similar effect using JavaScript libraries as jQuery, GSAP, Velocity or others.
For more complex animations I would suggest to use a specialized JS library as GSAP, if instead you need more simple, eyes catching animations you could consider also using some pre-made effects:
animate.css (CSS Keyframe Animation)
animatelo.js (Web Animation API) - disclaim I have created this library :)
It really depends of the complexity of you animation and your skill set.
#mario {
background: url(http://vignette1.wikia.nocookie.net/the-new-super-mario-bros/images/7/7e/200px-Mario_Nintendo.png/revision/latest?cb=20140505185215);
background-repeat: no-repeat;
width: 375px;
height: 375px;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-animation: leaves 5s ease-in-out infinite alternate;
animation: marioAnim 5s ease-in-out infinite alternate;
}
#-webkit-keyframes marioAnim {
0% {
-webkit-transform: scale(1.0);
}
100% {
-webkit-transform: scale(2.0);
}
}
#keyframes leaves {
0% {
transform: scale(1.0);
}
100% {
transform: scale(2.0);
}
}
<div id="mario"></div>
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>