I have a web app that uses the canvas to animate a tree that is drawn onto the screen. It does so by doing several trig calculations in a row. When you click the "grow" button there is an animation of a tree growing that has the certain attributes that the user can change. You can see the application here http://pastehtml.com/view/c85mxfgcj.html.
The problem is, if you set the "age" (the number of iterations to go through) too high, the animation starts to lag due to the calculations that the computer has to do. I was wondering two things:
Is there a way to pre-render the animation before it is shown to the user?
Is there a way to make it so that if I have a tree that has already been rendered and I wanted to animate it moving around the screen I could do that without having to re-draw the tree every single frame?
Thanks.
1: you might want to look into var fragment = document.createDocumentFragment();
2: yes via css, is much faster!
I think this youtube video will be worth your while.
Good luck
UPDATE: 9 Jan 2013
Just stumbled over this.
In css3 there is a animation feature using steps.
Basically you create a sprite (in canvas) and then use css3 to animate the sprite using a background-property on a element. Pretty cool (and should use the optimized browser's own code to do this, thus not load the users cpu as much as with javascript/canvas).
It's still not creating a animated gif however (but I think even that should be possible, using a library, since gif and pnp are quite alike, and then feed that gif using the data:image/gif protocol), but the end result still looks the same in the (modern) browser.
HTML:
<div class="hi"></div> or <img src="transparent.gif" class="hi">
CSS3:
.hi {
width: 50px;
height: 72px;
background-image: url("http://files.simurai.com/misc/sprite.png");
-webkit-animation: play 1s steps(10) infinite;
-moz-animation: play 1s steps(10) infinite;
-ms-animation: play 1s steps(10) infinite;
-o-animation: play 1s steps(10) infinite;
animation: play 1s steps(10) infinite; }
#-webkit-keyframes play { from { background-position: 0px; }
to { background-position: -500px; } }
#-moz-keyframes play { from { background-position: 0px; }
to { background-position: -500px; } }
#-ms-keyframes play { from { background-position: 0px; }
to { background-position: -500px; } }
#-o-keyframes play { from { background-position: 0px; }
to { background-position: -500px; } }
#keyframes play { from { background-position: 0px; }
to { background-position: -500px; } }
Example jsfiddle.
Related
I want to create a background similar to https://stripe.com/en-in homepage. It is a dynamic mesh gradient in a Canvas element. I tried to look into the source code but can't find relevant javascript code.
The closest I have gotten is this, but it uses CSS only no Javascript and isn't based on mesh gradient -
body {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 1000% 1000%;
animation: gradient 15s ease infinite;
}
#keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
<h1 class="text-light">Pure CSS Animated Gradient Background</h1>
Also, do you think the fact that I will be using it in SSR in NextJS is relevant here?
Thanks.
Dropping the link to JS Library which is basically exposing the stripe's code as API to plugin mesh gradient canvas dynamically -
https://github.com/anup-a/mesh-gradient.js
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">
I hope that this question is not too specific so it can relate to others problems...
I have two elements, a child and a parent, with the child element rotating around the parent using CSS animations.
<div class="planet">
<div class="moon"></div>
</div>
The moons animation is set so the moon will load ontop of the planet in the same position, but is pushed out with translateX then roatated, like so:
#keyframes myOrbit {
from { transform: rotate(0deg) translateX(200px) rotate(0deg); }
to { transform: rotate(360deg) translateX(200px) rotate(-360deg); }
}
Think of it as a planet with a moon rotating around the planet.
When the user resizes the window the planets height/width will resize, but I also need the moons height/width to resize AND the distance between it and the planet needs to lower.
I have set up an example here... https://codepen.io/anon/pen/mVvYbR
Would this be possible to acheive with just CSS, or would javascript be needed? I will use jQuery if need be, (I am not great at it though) but I would think a pure CSS solution would be cleaner... maybe I'm wrong on that one.
I should also note that the way it is set up currently (with the planet div holding the moon, is so that I can have multiple children (multiple moons). However I also think that this would mean having a massive amount of different animations for moons/planets which need different translateX's... So maybe jQuery is a better solution there...
If I am not clear on anything please let me know.
Thank you!
You can try do it with just css. You can use viewport units so all values will depend on viewport size.
.planet {
width: 10vw;
height: 10vw;
background: url(http://placehold.it/940x940) no-repeat center center;
background-size: contain;
z-index: 1;
}
.moon {
position: absolute;
background: url(http://placehold.it/140x140) no-repeat center center;
background-size: contain;
width: 5vw;
height: 5vw;
-webkit-animation: myOrbit 20s linear infinite;
-moz-animation: myOrbit 20s linear infinite;
-o-animation: myOrbit 20s linear infinite;
animation: myOrbit 20s linear infinite;
}
#keyframes myOrbit {
from { transform: rotate(0deg) translateX(20vw) rotate(0deg); z-index:1}
to { transform: rotate(360deg) translateX(20vw) rotate(-360deg); z-index:2}
}
Sample -> here
Probably you will need to add some media queries to handle different screen aspect ratios. Current viewport units support -> caniuse.com
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.
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!