Intense GPU usage for animations playing over blurred background - javascript

Considering this paragraph from calibreapp.com:
Browsers make optimizations by creating separate layers for elements
with CSS transitions or animations on Position, Scale, Rotation and
Opacity. When you have an animated element on its own layer, moving it
around doesn’t affect the positions of surrounding elements, the only
thing that moves is that layer. This way the browser avoids repaints
and does only compositing.
Now imagine we want to blur the whole background, the blur animation starts progresses and finally it finishes, ok?
Now on this blurred background we want to add a simple scale animation like this: (note that this is a separate div with no connection with background we already blurred)
.beaton {
animation: beatonAnime .5s infinite alternate;
}
#keyframes beatonAnime {
0% { transform: scale(1); }
100% { transform: scale(0.96); }
}
The confusing issue is:
Without that blurred background I get 1-2% GPU usage.
With that blurred background (which is not animating now and has finished seconds ago) I get 68% GPU usage!!!
As the paragraph said we should not see any difference between theses two as the blurred animation of background is not running when we add the scaling animation and they are in separate layers.
Here is the link to live example: (Note the GPU not CPU usage)
https://langfox.ir/test/beat/index.html
By the way this is the blur animation on the background:
.overlay {
animation: overlayShow 0.25s ease-in-out;
animation-fill-mode: forwards;
}
#keyframes overlayShow {
from {
backdrop-filter: blur(0);
background-color: rgba(35, 33, 36, 0);
}
to {
backdrop-filter: blur(80px);
background-color: rgba(35, 33, 36, 0.7);
}
}
Is there any solution for this?
NOTE: There is no such issue when I use filter: blur(80px) instead of backdrop-filter: blur(80px);. So what's wrong with backdrop-filter?

i get the same problem when play an animation above a blurred overlay.My final solution is to get a static blur image,it's formate cant be .png and shoule be .jpg.Then i set the overlay css property as 'background-image:url('../xxx.jpg)'.Since the background of the overlay is static,it wont take a lot gpu resource.Its a silly solution.

Related

Car driving forward animation using JavaScript/CSS3 for banner advertisement

Is there a way to use JavaScript or CSS3 to animate an image of a car driving towards a user? To clarify, the car image should animate from the background, with the image smaller and seemingly further away and gradually get larger as it "drives" forward to the foreground of the image? The image will be of the front part of the car and will look like this:
This JavaScript animation will be utilized in an HTML5 banner advertisement so I am hoping to avoid anything that will increase the size of my deliverable substantially. I have been looking online for something similar to this and can't seem to find an example of what I am hoping to accomplish. Any ideas are welcome.
You don't need javascript, you can just use a CSS3 animation. For example, this would work:
#keyframes drive {
from {
transform: scale(0.2);
}
to {
transform: scale(1);
}
}
.car {
animation: drive 3s cubic-bezier(0.02, 0.01, 0.21, 1) infinite;
}
<img class="car" src="https://i.stack.imgur.com/oT3DY.png"/>
Explanation:
First, we define a drive animation. It starts with a CSS3 transform that scales the image to 1/5th the size, then at the end of the animation, to full size. You can use any css property, even width but transform: scale doesn't force a page render, so your animation is faster.
Then, let's break down the animation property on the .car.
drive - this part is self-explanitory, it tells CSS to use the drive key frames
3s - makes the animation last 3 seconds
cubic-bezier(0.02, 0.01, 0.21, 1) - sets the curve for the animation to run, so it scales slower the further along it goes.
infinite causes the animation to repeat infinitely.
This should get you started:
img {
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
animation:mymove 3s infinite;
position: relative;
}
#keyframes mymove
{
0% {width:10%;}
10% {width:20%;}
20% {width:30%;}
30% {width:40%;}
40% {width:50%;}
50% {width:60%;}
60% {width:70%;}
70% {width:80%;}
80% {width:90%;}
90% {width:100%;}
100% {width:100%;}
}
<img src="https://i.stack.imgur.com/oT3DY.png">

Keep a CSS property until the transition of the other ends

I use the after pseudo-element to simulate a gradient transition, but my gradients can be different, so I created a class for each one of them and applied them with JS when I needed them. Of course in the general ::after I specify transition: opacity 1s; and in each one of the gradient classes I have a background and opacity: 1;. Now I stumbled upon a problem, I need to reverse the transition, but that wasn't so easy, because (since I use JS), I am removing the class, which means that the opacity transition will of course still run, but the background gets deleted immediately. How can I keep the background until the opacity transition ends?
JSFiddle: http://jsfiddle.net/5c7xfwLw/
I updated your fiddle:
http://jsfiddle.net/5c7xfwLw/1/
Because you are fading out you don't need to remove the background, like this you can do simply the opacity animation.
.green:after {
background: -webkit-linear-gradient(#53FF40, transparent 50%);
}
.fade-after::after {
opacity: 1;
}

Reliable hover detection with animation in JavaScript?

It seems that jquery hover (and presumably the underlying browser events) cannot be reliably used to keep track of which element the mouse is over when animations are involved, since the events do not fire if an element moves under or away from the mouse (rather than the mouse moving into the element).
See this fiddle for an example of the issue I'm having. If you hover over the div, the state according to the hover tracking events always disagree with reality, at least by the end of the animation.
I haven't tested this outside chrome, but I'm assuming the same behaviour across browsers.
HTML:
<div>hover me</div>
<p>state</p>
CSS:
div {
-ms-transition: -ms-transform 1s;
-webkit-transition: -webkit-transform 1s;
transition: transform 1s;
}
div:hover {
position: relative;
-ms-transform: translateX(200px);
-webkit-transform: translateX(200px);
transform: translateX(200px);
}
JavaScript:
$('div').hover(function() {
$('p').text('over');
}, function() {
$('p').text('out');
});
While the fiddle isn't a realistic example, I'm experiencing this issue in a webpage with animations. The question I have is how do I ensure that my javascript correctly knows the hover state after animations? I'd like to do this without having a global mousemove event to follow the mouse (i.e. so that I can look for the element under the last coordinate at the end of each animation).

CSS Keyframe Movements with Delays

I'm stumped with this animation. I have an element that I'm creating a path for movement (not including vendor prefixes in sample):
keyframes Path_1{
0% {left:54%;top:66%;}
50% {left:54%;top:68%;}
100% {left:54%;top:66%;}
}
This creates a simple path movement.
Paths are supplied to some JS like so:
"path" : "54,66||54,68"
The JS loops through all coordinates passed in and automatically generates a path movement keyframe. It also handles adding the last coordinate pair to loop the animation.
I'm wondering if there is any way to supply specific speeds / delays to each point?
keyframes Path_1{
0% {left:54%;top:66%;} <- 1s
50% {left:54%;top:68%;} <- 5s
100% {left:54%;top:66%;} <- 10s
}
Thanks!
You can't provide delays as extra parameters in the keyframe declaration. You basically get percentages within which you define which properties animate from what, to what during the fragment of animation overall time that the percentage defines.
However, there are ways of doing this. I've created a jsfiddle here
.animation {
width: 100px;
height: 50px;
background-color: #f00;
animation: demo 5s ease-in infinite;
}
#keyframes demo {
0% {
width: 100px;
}
50% {
width: 400px;
}
90% {
width: 400px;
}
100% {
width: 100px;
}
}
We can see that the animation is programmed to last 5s, but at one point a delay is achieved by keeping the animated properties static for n%. At 50%, the animation sticks at 400px and stays that way until 90% and the effect is a 2s pause. 40% of 5s = 2s.
Speed is also possible by adjusting the percentage and the overall time. The first section of the animation is slower than the second because the time spent to cover the same distance is just 10% of the overall time rather than 50%.
As usual, CSS Tricks does a great run through of what's available.
Now you just need to define this data in your json and interpret it in your javascript to build the correct keyframe anims, have fun with that!

Slideshow with content animated in CSS

I have a slideshow with 3 images. For each of the image I have need to add some content on top of the image, and the text need to move from right to left, and gone in 3 secs. Then it will slide to the 2nd image, and again, I have to display the content from right to left again, this time with a background box at the back of the text.
How can I do this kind of animation in css? Moreover, this slider need to be compatible for all browsers.
Can anyone give me a hint?
Thanks in advance.
You can totally do that kind of animation with CSS, but you would have to use javascript to trigger the animations. The method you are talking about would not work for all browsers. If you can use jQuery for your projects, then you can use the animate feature. Plus it would be compatible for essentially all browsers that people use.
For the CSS approach, you would use the animation property, like this
#keyframes {
from { color: #fff; } to { color: #000; }
}
#-webkit-keyframes {
from { color: #fff; } to { color: #000; }
}
.myanimatedclass{
animation: myanimation 2s ease-in;
-webkit-animation: myanimation 2s ease-in;
}
For the jQuery approach, look up jQuery's animate feature. You will find all that you need.
https://api.jquery.com/animate/

Categories