animated-text.svgBuild CSS keyframes on a visual timeline, edit transforms and preview the animation without writing CSS manually
CSS Animation Generator
Today
PreviewRunning
Animation settings
Duration1.2s
Delay0s
Iterations
Timing function
X10.22
Y11
X20.36
Y21
Scene & accessibility
Origin X50%
Origin Y50%
Perspective800px
TimelineDrag stops or click the track to add
0%
100%
Editing 0%
Position0%
Opacity0.25
Translate X0px
Translate Y38px
Translate Z0px
Scale0.72
Rotate-12°
Rotate X0°
Rotate Y0°
Scale X1
Scale Y1
Blur3px
Skew X0°
Skew Y0°
Border radius28px
Brightness1
Contrast1
Saturate1
Hue rotate0°
Grayscale0
Shadow X0px
Shadow Y16px
Shadow blur32px
Shadow spread-8px
.animated-element {
transform-origin: 50% 50%;
transform-style: preserve-3d;
animation-name: utility-motion;
animation-duration: 1.2s;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: both;
animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes utility-motion {
0% {
opacity: 0.25;
transform: translate3d(0px, 38px, 0px) scale(0.72) scaleX(1) scaleY(1) rotate(-12deg) rotateX(0deg) rotateY(0deg) skew(0deg, 0deg);
border-radius: 28px;
background-color: #8b5cf6;
filter: blur(3px) brightness(1) contrast(1) saturate(1) hue-rotate(0deg) grayscale(0);
box-shadow: 0px 16px 32px -8px #000000;
}
100% {
opacity: 1;
transform: translate3d(0px, 0px, 0px) scale(1) scaleX(1) scaleY(1) rotate(0deg) rotateX(0deg) rotateY(0deg) skew(0deg, 0deg);
border-radius: 12px;
background-color: #8b5cf6;
filter: blur(0px) brightness(1) contrast(1) saturate(1) hue-rotate(0deg) grayscale(0);
box-shadow: 0px 16px 32px -8px #000000;
}
}
@media (prefers-reduced-motion: reduce) {
.animated-element { animation-duration: 1ms; animation-iteration-count: 1; }
}Ready animation examples
Entrances
Fade in
Slide in up
Slide in down
Slide in left
Slide in right
Zoom in
Attention seekers
Pulse
Heartbeat
Shake X
Shake Y
Swing
Wobble
Continuous movement
Float
Bounce
Spin
Spin reverse
Pendulum
Orbit
Exits
Fade out
Slide out up
Slide out down
Slide out left
Slide out right
Zoom out
3D & cinematic
Flip in X
Flip in Y
Door open
Depth pop
Tilt float
Card turn
Color, light & filters
Color cycle
Focus in
Desaturate
Flash
Neon breathe
Contrast punch
Feedback