100% PrivateFree
Preview
Animation Properties
0.5s
0s
Keyframes
%
%
CSS Output
@keyframes myAnimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.element {
  animation: myAnimation 0.5s ease 0s 1 normal;
}

How It Works

1

Choose a Preset or Build Custom

Start with a preset animation like fade, slide, or bounce, or build your own from scratch.

2

Edit Keyframes

Add, remove, and modify keyframes with transform and opacity values at specific percentages.

3

Copy CSS

Copy the complete @keyframes rule and animation property for your stylesheet.

Frequently Asked Questions

What are CSS keyframe animations?
CSS @keyframes animations define a sequence of styles that an element transitions through over time. You specify the styles at various points (0%, 50%, 100%) and the browser interpolates between them.
What timing functions are available?
Common timing functions include ease (slow start and end), linear (constant speed), ease-in (slow start), ease-out (slow end), and ease-in-out (slow start and end). You can also use cubic-bezier for custom curves.
What does animation-direction do?
animation-direction controls whether the animation plays forward, backward, or alternates. "alternate" plays forward then backward, creating a yo-yo effect.
Can I combine multiple animations?
Yes, you can apply multiple animations to one element by separating them with commas in the animation shorthand property.
How do I make animations accessible?
Use the prefers-reduced-motion media query to disable or reduce animations for users who have requested reduced motion in their system settings.
Share:

Explore More

Love this tool? Explore 999+ more

Free online tools for images, PDFs, text, code, and more. All running in your browser.

Explore All Tools