Are NanoTools completely free to use?

Yes, all basic tools on NanoTools are completely free to use with no registration required. We offer premium features for power users.

Is my data secure when using NanoTools?

Your files are processed securely and are automatically deleted after processing. We do not store your files or data on our servers.

Do I need to install any software to use NanoTools?

No installation required. All tools work directly in your browser on any device - computer, tablet, or smartphone.

What file formats are supported?

We support a wide range of formats including PDF, JPG, PNG, WebP, GIF, JSON, XML, CSV, and many more depending on the tool.

NanoTools

Back to Tools

CSS Animation Builder - Create Animations

Build CSS animations online for free. Create keyframe animations visually. Export CSS code.

CSS Animation Keyframe Builder

Create complex CSS animations visually

Animation Settings

Animation Name

Duration: 2s

Timing Function

Iteration Count

Keyframes

Percentage: 0%

CSS Properties

Percentage: 50%

CSS Properties

Percentage: 100%

CSS Properties

Presets

Generated CSS

@keyframes myAnimation {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

.animated-element {
  animation: myAnimation 2s ease infinite;
}

What This Tool Does

Generates CSS @keyframes animation code
Add/remove keyframes at any percentage
Configure animation timing and duration
Animation presets (fade, slide, bounce, pulse)
Set iteration count (once or infinite)

How to Use

1
Add keyframes
Create animation steps at different percentages
2
Set properties
Define CSS properties for each keyframe
3
Configure timing
Set duration, timing function, and iterations
4
Copy CSS
Get complete animation code with @keyframes

How it works

Add keyframes

Create animation steps at different percentages

Set properties

Define CSS properties for each keyframe

Configure timing

Set duration, timing function, and iterations

Copy CSS

Get complete animation code with @keyframes

Use Cases

Creating loading animations for websites
Building attention-grabbing button effects
Animating hero section elements
Designing smooth page transitions
Learning CSS animation syntax

Frequently Asked Questions

What are keyframes?

Keyframes define the styles at specific points during the animation sequence.

What is timing function?

It controls animation pacing - ease, linear, ease-in, ease-out, or ease-in-out.

Can animations run infinitely?

Yes, set iteration-count to infinite for continuous animations.

Do CSS animations affect performance?

Animate transform and opacity for best performance. Avoid animating layout properties.

Back to Tools

CSS Animation Builder - Create Animations

Build CSS animations online for free. Create keyframe animations visually. Export CSS code.

CSS Animation Keyframe Builder

Create complex CSS animations visually

Animation Settings

Animation Name

Duration: 2s

Timing Function

Iteration Count

Keyframes

Percentage: 0%

CSS Properties

Percentage: 50%

CSS Properties

Percentage: 100%

CSS Properties

Presets

Generated CSS

@keyframes myAnimation {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

.animated-element {
  animation: myAnimation 2s ease infinite;
}

What This Tool Does

Generates CSS @keyframes animation code
Add/remove keyframes at any percentage
Configure animation timing and duration
Animation presets (fade, slide, bounce, pulse)
Set iteration count (once or infinite)

How to Use

1
Add keyframes
Create animation steps at different percentages
2
Set properties
Define CSS properties for each keyframe
3
Configure timing
Set duration, timing function, and iterations
4
Copy CSS
Get complete animation code with @keyframes

How it works

Add keyframes

Create animation steps at different percentages

Set properties

Define CSS properties for each keyframe

Configure timing

Set duration, timing function, and iterations

Copy CSS

Get complete animation code with @keyframes

Use Cases

Creating loading animations for websites
Building attention-grabbing button effects
Animating hero section elements
Designing smooth page transitions
Learning CSS animation syntax

Frequently Asked Questions

What are keyframes?

Keyframes define the styles at specific points during the animation sequence.

What is timing function?

It controls animation pacing - ease, linear, ease-in, ease-out, or ease-in-out.

Can animations run infinitely?

Yes, set iteration-count to infinite for continuous animations.

Do CSS animations affect performance?

Animate transform and opacity for best performance. Avoid animating layout properties.