Updated · Built and checked by the PlinzoTools team, formulas tested against published sources
Build a @keyframes fade/slide animation and its animation shorthand.
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0px); }
}
animation: fadeInUp 400ms ease 1;This tool builds a CSS @keyframes animation using a simple two-state (from/to) fade and vertical-slide pattern -- one of the most common animation effects for revealing content -- plus the animation shorthand declaration that applies it.
Set an animation name, duration, starting/ending opacity, starting/ending vertical offset, and iteration count. The generated @keyframes block and animation shorthand appear instantly.
A @keyframes rule defines named animation states (here, "from" and "to"); the animation shorthand property (name duration timing-function iteration-count) applies that keyframe animation to an element, and the browser smoothly interpolates between the states over the given duration.
For a static drop-shadow or gradient effect instead of motion, see the Box Shadow Generator or CSS Gradient Generator.
The tool starts with the name fadeInUp, a duration of 400 milliseconds, opacity going from 0 to 1, a vertical offset going from 20 pixels to 0, and an iteration count of 1. Its output has two parts: a keyframes block containing a from state and a to state, each setting opacity and transform: translateY, and one animation line in the form animation: name duration ease count; The timing function is fixed to ease. The iteration count menu offers 1, 2, 3 or infinite.
For a hypothetical notification banner that should slide down into view, set the starting vertical offset to -30 and the ending offset to 0, with opacity from 0 to 1 and a duration of 500. A negative starting value means the element begins 30 pixels higher than its final position, so it moves downward as it appears. Rename the animation to something meaningful such as slideDownIn, paste the whole output into your stylesheet, and add the animation line to the rule of the banner element. The keyframes block stands alone at the top level of the stylesheet, while the animation declaration goes inside a selector.
The animation name is used exactly as typed in both the keyframes rule and the shorthand line. Use letters, numbers, hyphens or underscores, and do not start with a digit. Avoid spaces, which would break the CSS. Keep it unique so it does not clash with other animations on the page.
With a finite count, the element returns to its normal styles once the animation completes. Since this tool ends on your chosen final state, that is usually the same as the element's normal state, such as full opacity and no offset, so nothing visibly jumps. But if the end values differ from the element's regular styles, add animation-fill-mode: forwards to keep the final frame. Likewise, if the element has a delay before starting, add animation-fill-mode: backwards or both so it does not flash in its normal state first.
Some users configure their systems to reduce motion because animation can be uncomfortable for them. It is good practice to wrap your animation declaration in a prefers-reduced-motion media query, or turn it off there, so the content simply appears without moving. The generator does not add this for you.
Only opacity and vertical translation are covered, with two keyframes. Horizontal movement, scaling, rotation, multi-step keyframes and custom timing curves must be added by hand. Animating opacity and transform is generally smooth because browsers handle them efficiently.
Yes -- once applied to an element via the animation property, it plays automatically on page load (or whenever the element becomes visible/re-rendered), without needing JavaScript to trigger it.
It repeats the animation forever in a loop, rather than playing once (or a fixed number of times) and stopping -- useful for continuous effects like a pulsing or spinning indicator.
This tool generates a simple from/to (2-state) animation; CSS itself supports percentage-based keyframes (0%, 50%, 100%, etc.) for more complex multi-step animations, addable by hand to the generated block.
Put the keyframes block at the top level of your stylesheet, and put the animation line inside the rule of the element you want to animate.
That usually happens when a delay is added. Add animation-fill-mode: backwards or both so the starting keyframe is applied during the delay.
Use a positive starting offset, like 20, and an ending offset of 0. The element begins lower than its final place and moves up.
The tool uses ease. Edit the word in the generated animation line to linear, ease-in-out or a cubic-bezier value if you want another curve.
Reference: MDN Web Docs