CSS Animation Generator

Create eye-catching CSS animations without writing keyframes from scratch. Choose from ready-made effects, customize timing and movement, edit keyframes and preview your animation live. Copy or download the generated CSS when you’re happy with the result.

Tutorial

You don’t need to be an experienced web developer to create CSS animations. The DesktopGoodies CSS Animation Generator makes it possible to create movement effects visually, adjust how they behave and generate the CSS code for your website.

Before getting started, it helps to understand a few basic concepts.

1. What Are CSS Animations?

CSS is the code used to control how elements on a website look. This includes colours, fonts, sizes, spacing and positioning.

CSS animations allow elements to move or change their appearance over time. For example, you can make a button grow slightly when it appears, make a heading fade into view or create a bouncing effect.

Instead of manually changing an element several times, an animation tells the browser how the element should change from its starting appearance to its final appearance.

2. What Are Keyframes?

Keyframes are the individual stages of an animation. They tell the browser what an element should look like at specific points during the animation.

Think of an animation as a short sequence of events:

• 0%: The animation starts. An element might be invisible and positioned below its final location.
• 50%: The element has moved upwards and become partly visible.
• 100%: The element has reached its final position and is fully visible.

These percentages represent the progress of the animation, not time in seconds.

You can add more keyframes to create more complicated movements. For example, a bouncing animation needs several stages to show the element moving up, falling down and bouncing again.

You don’t need to write the keyframe code yourself. The generator creates it for you.

3. Choose a Ready-Made Animation

Open the CSS Animation Generator and find the Preset menu under Choose an Animation.

Select one of the available effects. There are several options to experiment with:

• Fade In: Gradually makes an element visible.
• Slide Up: Moves an element upwards into position.
• Slide Left / Right: Moves an element horizontally.
• Zoom In / Out: Changes the size of an element.
• Bounce: Makes an element move up and down.
• Pulse: Repeatedly grows and shrinks an element.
• Shake: Moves an element quickly from side to side.
• Rotate: Turns an element around.
• Flip: Creates a rotating effect around its vertical axis.
• Swing: Makes an element swing from side to side.
• Heartbeat: Creates two quick scaling movements.

Choose an effect and look at the Live Preview to see how it works.

4. Adjust the Animation Settings

Once you have selected an animation, you can control how it behaves.

Duration

Controls how long one complete animation takes. A value of 1 second means the animation takes one second to complete. Increase the value for slower movement or decrease it for a faster effect.

Delay

Controls how long the browser waits before starting the animation. For example, a delay of 2 seconds means the animation starts two seconds after it is triggered.

Iterations

Determines how many times the animation plays. You can choose a specific number of repetitions or select Infinite to make it repeat continuously.

Timing Function

Controls the speed of the animation at different stages.

• ease starts slowly, speeds up and slows down again.
• linear moves at a constant speed.
• ease-in starts slowly and speeds up.
• ease-out starts quickly and slows down.
• ease-in-out starts and finishes slowly.

Direction

Determines which direction the animation plays. Normal plays forwards, Reverse plays backwards, while Alternate switches direction each time it repeats.

Fill Mode

Controls how the element appears before and after the animation.

• none leaves the element in its original state.
• forwards keeps the final animation state.
• backwards applies the starting animation state during any delay.
• both combines the forwards and backwards behaviours.

Try changing these settings and watch how the preview changes.

5. Customize the Preview Element

The generator lets you choose what the animated example looks like.

Under Customize Preview, you can select:

• Card: A rectangular element with rounded corners.
• Button: A button-shaped element.
• Circle: A circular element.
• Text: A simple text element.

You can also change the label, background colour and text colour.

These settings make it easier to imagine how the animation might look on your own website. They only affect the preview and are not automatically included as styling for your website element.

6. Create Your Own Animation with Keyframes

Once you understand the presets, you can experiment with your own movements.

The Keyframes section contains the individual stages of your animation. Each keyframe has several editable values:

• Position: Where the keyframe belongs in the animation, expressed as a percentage from 0 to 100.
• Move X: Moves the element horizontally. Positive values move it to the right, negative values to the left.
• Move Y: Moves the element vertically. Positive values move it downwards, negative values upwards.
• Scale: Changes the element’s size. A value of 1 is the original size, 1.5 makes it 50% larger, and 0.5 makes it half its original size.
• Rotate: Turns the element by a number of degrees. Positive and negative values rotate in opposite directions.
• Opacity: Controls transparency. A value of 1 is fully visible, while 0 makes the element completely transparent.

For example, you can create a simple bouncing effect by setting the first keyframe to Move Y = -60, the middle keyframe to Move Y = 0 and the final keyframe to Move Y = -20.

Use Add Keyframe to insert another stage into the animation. You can remove keyframes with the X button, but you must keep at least two.

Experiment with different values and use the Live Preview to see the result.

7. Copy or Download Your CSS Code

When your animation looks the way you want, scroll down to Generated CSS.

The generator has converted your animation settings and keyframes into CSS code.

You have two options:

• Copy CSS: Copies the generated code so you can paste it into your website’s stylesheet.
• Download CSS: Saves the code as a separate CSS file.

The generated code includes the animation settings and the keyframes that describe the movement.

To use the animation, you need to add the CSS to your website and apply the dg-animated-element class to the HTML element you want to animate. If you use a different class name, make sure it matches the selector in the generated CSS.

Tips for Better CSS Animations

• Start with simple effects such as Fade In or Slide Up before experimenting with custom keyframes.
• Use short animations for buttons and other interactive elements.
• Avoid too many simultaneous animations, as they can make a page distracting.
• Test your animations on both desktop and mobile screens.
• Consider visitors who prefer reduced motion. The generated CSS includes a setting that disables the animation for users who have enabled this accessibility preference.