GIF + PNG sequence generation for your website and animation project!
This is a GIF builder for our loading.css Project, which is a set of CSS Animation that works for loading animation. Instead of generating GIF, you can also use loading.css directly in your website. loading.css contains 70+ animations designed for loading effect and several default spinner with pure css.
use loading.css is quite simple. For example,
<span class="ld ld-ring ld-spin"></span> will generate a spinner like this:
For now, GIF has the best compatibility across browsers.
CSS animation is widely supported in various browsers nowaday, yet some older browsers still don't support CSS animation. Furhtermore, CSS-based animation usually needs special care for both its CSS and HTML/SVG part.
Although GIF can be used everywhere, it sadly provides the worst image quality. you can consider APNG, WebP or Animated SVG for the quality sake, but none of them are supported by older browsers.
Images are resized according the size slider in the control panel, which cause your gif look blurry. Try using SVG instead of PNG or JPG for better result for resizing.
GIF, by its nature, can't do well with both transparency and curve edges. It's because GIF doesn't support alpha channel - like opacity with gradient - and only either opaque or complete transparent for each pixel.
Following are the same bulb file in GIF format with two different background color, you can see while the left bulb looks perfect, the right bulb is totally not acceptable in quality.
Meanwhile, following are the same bulb file again but in PNG format. Both bulbs look perfect, because PNG supports alpha channel transparency:
Unfortunately, PNG doesn't support animation. APNG adds animation support to PNG, but some browsers (like IE) don't support APNG.
To make your GIF looks better in your project, config its background to the background color in your project. It will make the GIF better blended into the place where you use it. Following are two different bulbs in GIF format, with different background color, now they look better now:
Please check out the v2 animation builder here. We are still beta testing this v2 builder, but it provides layered animation and animated SVG output for your SVG images.
Currently it only supports Google Chrome and it's for Pro user only.
physical invoice only applicable in Taiwan
after canceling subscription, you will need to pay each time for downloading RF license icons or use advanced features after this billing period ends. Are you sure?
advanced feature and subscription will be available soon.
come back then!