Constructing movement with fixed points at 0%, 50%, and 100%
In CSS animations, intermediate states are specified using @keyframes percentages. This CSS animation keyframe builder is configured to edit only three fixed points: 0% (start), 50% (middle), and 100% (end).
When you select an editing point using the buttons at the top of the screen, the opacity, scale, rotation, position, border radius, and background color saved at that point are displayed in the respective input fields.
For example, if you set the scale to 1.0 at 0% and 100%, and to 1.5 only at 50%, the element will grow in the middle and return to its original size.
By positioning the element on the left at 0%, on the right at 50%, and back at its original position at 100%, you can create a movement that appears to go back and forth.
However, this does not use the alternate value of animation-direction, but simply expresses a back-and-forth trajectory using the coordinate values of these three points.
The percentages you can edit are fixed; adding points like 25% or 75%, deleting existing points, or dragging them on a timeline are not supported.
This is not a complex editing software for finalizing multi-stage animations, but rather a tool to create the basic form of standard CSS by comparing the start, middle, and end states.
Value ranges for 7 properties and CSS conversion
For each keyframe, you can set opacity, scale, rotate, translateX, translateY, border-radius, and background-color.
Opacity is manipulated as 0 to 100% on the screen and output as a value from 0 to 1 in CSS. Scale ranges from 0.5 to 2.0 times, rotate is from -360 to 360 degrees, translateX and translateY are from -100 to 100px each, and border-radius is from 0 to 50px.
The background color is specified using a color picker or text field.
Movement, rotation, and scaling are combined into the transform property rather than being output as separate CSS declarations.
The output order is translate(Xpx, Ypx) rotate(deg) scale(factor). For example, setting X to 50px, Y to -30px, rotation to 90 degrees, and scale to 1.2 will result in transform: translate(50px, -30px) rotate(90deg) scale(1.2);.
Opacity, border-radius, and background-color are included as independent declarations within the block for the corresponding percentage.
The result of the transform function can change depending on the order of its declarations. Since this tool does not have a feature to change this order, manually swapping the sequence of rotate and translate after generation may result in a movement different from the preview.
Furthermore, text inputs for colors utilize values valid in CSS without strict internal validation, so you should verify their display in target browsers after pasting.
Common settings for duration, easing, and repetition
The playback duration can be adjusted from 0.5 to 5.0 seconds in 0.1-second increments. This value is included in seconds within the animation shorthand property of .animate-target.
A shorter time will quickly pass through the three points, while a longer time allows you to observe the changes slowly. There is no feature to assign different durations to individual keyframes.
There are five types of easing available: ease, linear, ease-in, ease-out, and ease-in-out. linear progresses at a constant rate over time, ease-in makes the beginning appear slower, and ease-out makes the end slower.
ease and ease-in-out also have acceleration and deceleration, but their specific curves follow CSS definitions. Features to directly input four cubic-bezier values or edit a curve graph are not provided.
Repetition offers two choices: a single play when the switch is turned off, and infinite when turned on. There are no options to specify arbitrary counts like 2 or 3 times, start delays, reverse playback, alternating playback, or states after completion.
If necessary, you must manually add animation-delay, animation-direction, or animation-fill-mode to the copied CSS. In such cases, the preview within the tool will no longer match the resulting code, so you must verify it directly in your application.
Reading the generated .animate-target and @keyframes
The output consists of two parts: .animate-target, which assigns the animation to an element, and @keyframes custom-keyframes, which defines the state changes.
The animation property of .animate-target contains the name, duration, selected easing, and either 1 or infinite in that order.
The @keyframes side includes blocks for 0%, 50%, and 100%, where you can see the transform, opacity, border-radius, and background-color you specified on the screen.
To use this, paste the CSS code into your stylesheet or a <style> element, and add the animate-target class to the HTML element you want to animate.
If you are already using a class with the same name or a keyframe named custom-keyframes in an existing project, rename both to matching alternatives to avoid collisions.
Be aware of potential conflicts with existing animation or transform declarations on the element itself.
The output provides only standard CSS; it does not generate SCSS, LESS, Tailwind CSS, HTML, JavaScript, vendor-prefixed code, or minified code.
Copying utilizes the Clipboard API and immediately displays a completion status. It does not verify success; please verify the pasted code in your destination environment, and manually select the text from the code field if copying fails due to browser permissions.
How to use the preview, pause, and sample features
When you change a setting value, the CSS string is regenerated and applied via an in-page <style> element to a dummy element labeled Target.
This allows you to verify the connection between the three points, the amount of movement, scaling, and color changes on the same screen before pasting.
Pausing removes the animation using animation: none !important; to reset it, and resuming restarts it from the beginning rather than continuing from the paused position.
The exported CSS code retains the normal animation configuration regardless of the pause state.
The sample sets the middle frame to 180 degrees and the last frame to 360 degrees. Select either keyframe and adjust its rotation using the same slider.
The preview relies on the CSS rendering of your current browser. Smoothness and actual frame rates will vary depending on device performance, the browser, the number of elements displayed simultaneously, and the processing load of the target page.
This tool does not guarantee GPU utilization, a constant 60fps, absolute absence of frame drops, or identical timing across all environments.
Always verify the display on target browsers and real pages before production use.
Unsupported settings and considerations for additional implementation
Because this tool handles three fixed points and seven basic properties, it does not add properties like skew, filter, box-shadow, or text-shadow to the keyframes.
Arbitrary keyframes, custom cubic-bezier, delay, arbitrary play counts, direction, alternate, and fill-mode cannot be set from the screen.
While you can add necessary declarations after generation, the results will change depending on the CSS combinations, requiring manual verification.
The generated animation runs immediately after page load on any element with the animate-target class. It does not generate mechanisms to start the animation triggered by hover, focus, clicks, or scroll positions.
Implement these according to your screen's requirements, for example, by specifying the animation within a pseudo-class for hover, or by adding and removing classes with JavaScript for clicks.
Furthermore, it does not support sequencing multiple elements to move in order, saving settings to files, maintaining edit history, undo actions, or reading code for reverse conversion.
The most suitable workflow is to create a basic form with this tool, copy the CSS, and adjust the naming, trigger conditions, and detailed settings on the project side.
This does not imply an absolute absence of communication related to site usage, nor does it guarantee full offline capability or absolute security.