refaislam.blogg.se - Speed up gif

Since we have 24 frames in this example, we'll use steps(23). Set the steps to be the number of frames minus 1.

Set the animation for the div including the steps() for the animation-timing-function property.

This will move the background image from right to left over the course of the animation.

Add a basic keyframes animation to your CSS (code below) to control the position over time.

This changes the size of the image relative to the width of your div so that each "frame" of the spritemap is the width to fill the div. In this example, I have 24 frames, so background-size is 2400%.

Set the background-size attribute to be a 100% multiplied by your number of frames.Set the spritemap as the background image of a div.(See manual and automatic spritemap solutions at the bottom for detailed instructions.)

You can do this completely manually, though it is tedious if the GIF has many layers. The code below shows a basic example of the result, followed by a detailed breakdown.īackground: url("url-for-spritemap.png") 0 0 no-repeat Īnimation: anim-ss steps(23) 1s anim-ss With this we gain full control over animation easing, duration, and delay. Overview: We'll convert the GIF into a PNG spritemap, make it the background-image of our HTML element, then use a basic CSS animation to move the frames in steps. When you do need dynamic control of the animation using CSS. Just double click the name and enter your new time (80ms if you want to slow it down to half speed in this example), then press enter. In the "Layers" panel, change the layer display duration to whatever you need for each layer.When you really just need to change the GIF speed and don't really need to control it with CSS. If you're willing to use an image editor, such as the excellent and free GIMP, then there are some simple solutions to this problem. However, the answer to your other question is "yes" - there are ways to slow down your GIF, or even enable complete CSS control of the animation, with a little help from an image editor. Unfortunately, there is no way to directly control the animation of a GIF with only HTML/CSS.