Animation Timeline Editor

Animation Timeline Editor

Build CSS animation for six defined properties. Change .your-element to your target selector and check movement in its surrounding layout.

1. Animation settings

Edit your keyframes.

2. Keyframes

0% and 100% are fixed. Each easing applies from its frame to the next frame. Up to 20 frames are supported.

0% · f1

45% · f2

100% · f3

3. Playback and scrub

Play runs once from the start. The slider pauses at the selected time.

4. CSS and project files

Replace .your-element with your own selector. Infinite iteration does not settle on the last frame.

@keyframes teck-tani-motion {
  0% {
    transform: translate(-80px, 0px) rotate(-12deg) scale(0.75);
    opacity: 0.2;
    background-color: #2563eb;
    animation-timing-function: ease-out;
  }
  45% {
    transform: translate(15px, -30px) rotate(12deg) scale(1.2);
    opacity: 1;
    background-color: #8b5cf6;
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    background-color: #14b8a6;
  }
}

.your-element {
  animation: teck-tani-motion 1800ms linear 1 normal both;
}

@media (prefers-reduced-motion: reduce) {
  .your-element {
    animation: none;
    transform: translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    background-color: #14b8a6;
  }
}

Comments & questions

Animation Timeline Editor

Set the position, rotation, scale, opacity, background color, and outgoing easing at each keyframe. Add a new frame in the longest gap and export frames in time order even if you edited them out of order. Play or scrub the preview, copy the CSS, or download a JSON project to edit later. The generated CSS includes explicit 0% and 100% states and a static final state for reduced motion.

Key features

  • Sorted 0–100% frames and midpoint insertion
  • Position, rotation, scale, opacity, background color, and per-segment easing
  • Play, pause, and time scrub preview
  • Final-state fill and static reduced-motion CSS
  • Copy/download CSS and round-trip editable JSON

How to use

  1. Load the example or set a title, duration, and iteration count.
  2. Edit properties and easing at each frame; add intermediate frames as needed.
  3. Play from the start or move the time slider to inspect a position.
  4. Copy the generated CSS or download its file.
  5. Download JSON and import it here later to continue editing.

Use cases

  • Prototype button and card entrances
  • Review segment speeds and the final state
  • Draft CSS with a reduced-motion alternative

Frequently asked questions

Which properties can this editor animate?

It edits X/Y translation, rotation, scale, opacity, and background color. It does not accept arbitrary CSS declarations or edit SVG paths or video tracks.

What if frames are out of order?

The output sorts them by their 0–100% offsets. Duplicate offsets cause an error so the generated CSS remains unambiguous.

Does the last state remain visible?

The CSS uses animation-fill-mode: both and requires a 100% frame. Infinite iteration never finishes, so it does not settle on the last state.

How is reduced motion handled?

The output includes a prefers-reduced-motion: reduce rule that disables animation and shows the 100% frame as a static state. Automatic playback in this page is also disabled when the device requests reduced motion.

Is my project saved automatically?

No. It stays in this page's memory. Download the editable JSON to resume later.

Privacy

Settings stay in the current browser memory. There is no automatic upload or save. Downloaded JSON includes your project title and frame values.

Related Tools

CSS Gradient GeneratorCSS Box Shadow GeneratorCode to ImageImage Super ResolutionHDR Exposure MergerPhoto Colorization LabPanorama StitcherSheet Nesting PlannerEdit Decision WorkbenchTeleprompter StudioBilingual Video Study PlayerChord Progression LabMusic Score EditorSubtitle WorkbenchSpatial Audio DesignerMusic Chord Candidate AnalyzerMIDI Piano Roll EditorSample Instrument BuilderImpulse Response LabAudio Waveform EditorDTMF Signal LabSpectrogram Sound PainterAudio Spectrum AnalyzerAudio DenoiserAudio Source SeparatorSound Effect SynthesizerMultitrack Audio MixerAudio Transient SlicerAudio Loop Seam FinderAudio Loudness AuditorAudio Pitch Tempo StudioStereo Anaglyph MakerPhoto Mosaic MakerImage Frequency SpectrumSimilar Photo FinderLenticular InterlacerPBR Texture Map LabPanorama Tour BuilderImage Calibration TargetsImage Steganography LabVector Morph EditorDocument Perspective CorrectorImage Inpainting StudioKnitting Chart EditorSVG Boolean WorkbenchSVG Path EditorSeamless Pattern MakerScreenprint Separation StudioQuilt Layout PlannerPerspective Mockup StudioLow Poly Mesh MakerFont Subset BuilderFocus Stacking LabImage Depth EstimatorCross Stitch Chart MakerPixel Paint StudioImage Difference HeatmapImage Quality LabID photo makerBarcode scannerVideo to GIFVideo Chroma KeyerVideo StabilizerVideo Reframe StudioStop Motion StudioVideo Timecode ConformerVideo Quality ComparatorHLS and DASH Manifest ValidatorVideo Speed Ramp EditorVideo Container InspectorVideo Storyboard MakerVideo Privacy MaskerRotoscope Mask EditorVideo Motion TrackerVideo Frame InterpolatorAudio Description EditorVideo Audio Sync LabVideo TrimmerGIF Frame ExtractorSVG to PNG / JPEGImage to SVG VectorPixel Art ConverterCircle Profile CropPhoto and Polaroid FrameRound Image CornersJPEG EXIF Viewer and RemoverImage Color Vision SimulatorImage to ASCII ArtPhoto CollageInstagram 9-Tile SplitterLong Image SplitterImage CropRotate and Flip ImagesImage FiltersMeme GeneratorScreenshot BeautifierBarcode GeneratorQR Code GeneratorImage CompressorImage ResizeImage ConverterFavicon GeneratorYouTube Thumbnail ExtractorHEIC to JPGSignature & Stamp MakerImage WatermarkGIF MakerImage Color PickerImage to Text (OCR)Merge ImagesPhoto Blur & MosaicQR Code ScannerMP4 to MP3 ConverterVideo CompressorBackground Remover
Explore all Image/Media tools →Text/Convert →Life/Fun →Dev Tools →