CSS Keyframe Movements with Delays - javascript

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!

Related

Intense GPU usage for animations playing over blurred background

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.

Javascript-JQuery When

Guys I am making a menu bar but I have been stuck in animating or moving it. These are my reletant codes:
function navbar(){
document.getElementById("a").style.marginLeft = "50%";
.
.
.
function navbar2(){
document.getElementById("a").style.marginTop = "-100px";
}
$(document).ready(function(){
$("#a").click(function(){
navbar();
var x = $('#a');
$.when(x.css("margin-left")=="50%").done(function(){
navbar2();
});
});
});
I want my navbar icon to first move margin-left = 50%; and after this when my icon reaches margin-left 50%, move icon to top. But now when I click on icon it starts to go top and right at same time. But I want my icon to first go right then go top.
Can someone please help?
You can do it like this with jQuery, without requiring navbar() and navbar2() :
$("#a").click(function() {
$(this).animate({
margin-left: "50%"
}, "slow")
.animate({
margin-top: "-100px"
}, "slow");
});
jQuery can do animations but CSS can do them better with CSS Keyframes. This is because of CSS being much more performant and can use low-level systems (talk directly to the browser) to do your animations.
Start off by creating a CSS class which has an animation property. With this property you can tell the browser what the animation should be, how long it should take, if it has a delay, and many more options.
Now it's time to create your animation with the #keyframes keyword. After the keyword you specify the name of the animation. Inside the #keyframes block you continue with the steps of the animation. In the example below I've used 0%, 50% and 100% as the steps, or keyframes, of the animation. These numbers indicate the start (0%), the halfway point (50%) and the end (100%).
Within the blocks of the keyframes you specify what you want the style to be at that specific point. So you could say that at the start you don't want any margin, but at 50% you want the margin to be -50% to the left. Then at 100% you want the margin to be both -50% to the left and -100px to the top.
/**
* Define a class with an animation property.
* This specific class uses the navbar-animation animation which
* completes in 3 seconds without delay. It also has a linear easing
* and only runs once. The fill-mode specifies if the last keyframe
* of the animation should persist if the animation is finished.
* Otherwise your element would shoot back to its starting position.
*/
.animation {
animation-name: navbar-animation;
animation-duration: 3s;
animation-delay: 0s;
animation-timing-function: linear;
animation-iteration-count: 1
animation-fill-mode: forwards;
/* Or in shorthand */
animation: navbar-animation 3s 0s linear 1 forwards;
}
#keyframes navbar-animation {
0% {
/**
* This is the starting position of the animation.
* without any margins.
*/
margin: 0;
}
50% {
/**
* At the halfway point the element should be 50% to
* to the left.
*/
margin: 0 0 0 -50%;
}
100% {
/**
* At the end the animation has to be 50% to the left
* and 100px up.
*/
margin: 0 -100px 0 -50%;
}
}
Because you now have your animation specified in CSS, you don't have to worry anymore about it in your JavaScript, which makes your JS much less complex.
All you have to do now is to add the CSS class you specified above here and add it whenever you've clicked the element that should trigger the animation.
$(document).ready(function() {
// Select the element and store it in a variable so
// you don't have to select it again.
var $a = $('#a');
// Only add a CSS class to the element and let CSS
// handle the animation.
function addAnimation() {
$a.addClass('animation')
}
// Listen for click to call the addAnimation function.
$a.on('click', addAnimation);
});
That should do it to create the animation you want. As a side note I want to add that I encourage you to use the transform property instead of margin to move your elements. transform is meant for this kind of operation without breaking the flow of the document and keeping performance high.

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">

Animating a spritesheet using css

I am having trouble animating a spritesheet using css
every example i see contain a sprite sheet with only 1 line of sprite or 1 column
like this :
and they animate it using the keyframes
#keyframes play {
100% { background-position: -1900px; }
}
but for me the spritesheet is a grid with 10x8
Is their anyway to achieve an animation using css for this particular spritesheet ? or i should use HTML5 canvas instead ?
Every frame is 90x96 px
this is my image
The way to handle an animation on grid sprites is to use 2 animations.
One for horizontal and one for vertical
Live Demo
.hi {
width: 90px;
height: 96px;
background-image: url("http://i.stack.imgur.com/G7o8R.jpg");
-webkit-animation: playv 6s steps(7) infinite, playh 1s steps(9) infinite;
}
#-webkit-keyframes playv {
0% { background-position-y: 0px; }
100% { background-position-y: 100%; }
}
#-webkit-keyframes playh {
0% { background-position-x: 0px; }
100% { background-position-x: 100%; }
}
My answer is based on this answer:
CSS animations with Spritesheets in a grid image (not in a row)
The easiest, most KISS (keep it super simple) method I'd suggest is to take the image generated from texture packer, and copy and paste each row into just 1 long row, so you then have 1 long line. Save that as a new file to work from. More similar to the 1 line / 1 column example you have at the beginning.
I'd also suggest adding more padding/space between each fuzzball (best description I could think of) if possible. Otherwise targeting each frame with no bleed on the edge may be difficult. Such as row 9, column 9, with the fuzzball arms almost touching.

How to scroll a div, pause & restart in javascript

How can I make a simple javascript animation to scroll a div (#MyDiv) from say 300px to - 300px over 15 seconds, pause for 15 seconds, then replay, and keep doing this on an endless loop?
I tried with css using multiple methods but its just not smooth enough for my needs.
My experience is that CSS3 animations are almost always more smooth than animations done by Javascript libraries.
Here's a way to do it without any Javascript, with CSS3 animations:
#scrollingContent
{
animation: scroll 30s linear 0s infinite normal;
-webkit-animation: scroll 30s linear 0s infinite normal;
}
#keyframes scroll
{
0% { top: 300px; }
50% { top: -300px; }
100% { top: -300px; }
}
#-webkit-keyframes scroll
{
0% { top: 300px; }
50% { top: -300px; }
100% { top: -300px; }
}
Working demo: http://jsfiddle.net/nj9yfk7b/
And here's an alternative way to do it with native Javascript and CSS3 transitions:
Working demo and code: http://jsfiddle.net/yfk7330j/
In this case, the transitions are triggered by Javascript by setting and un-setting a certain class name on the element that should be scrolling.
The transition version allows for better control with Javascript, while the animation version just does it's looping thing infinitely.
I tried to keep the code clean as possible, but please let me know if it needs any clarification.
Maybe the functions ScrollBy and SetInterval can help you:
http://www.w3schools.com/jsref/met_win_scrollby.asp
http://www.w3schools.com/jsref/met_win_setinterval.asp
You can use the intervals to jump every x ms y pixels, and then wait 15 seconds after you have reached an amount of pixels.
Also, I've seen this JQuery plugin, maybe it can also help (though I haven't researched it properly though):
Scrolld.js
Rememberer that people here won't write the code for you, but will happily help you pass through specific problems.

Categories