Hi!

As you can see behind this window, it's a mess.

Because it's a dev tool, I didn't spend the time (at least yet) to make it responsive, since most people don't do dev work on a small screen.

But tap anywhere if you want to try it anyway. Also, if your browser has a "Request Desktop Version" option, enable that and it'll improve it a little bit.

×
/* Styles for the element being animated */ display: flex; flex-direction:column; justify-content: center; text-align:center; color: #00f90f; width: 70px; height: 70px; background-color: SlateBlue; border-radius: 3px; margin: 0 auto;
/* Styles for the white stage/container element */ display: flex; flex-direction: column; justify-content: center; text-align: center; width: 80%; height: 80%; background-color: white; margin: 0 auto;
Click on an element you would like to animate.
Hello!
CSS Properties at 0%
Don't forget units when necessary.
& if you change a value on one step, it should have a value on every step, even if it's the same or 0.
Transform
Rotate
Scale
TranslateX
TranslateY
SkewX
SkewY
Transform Origin
Colors & Font
Background
Opacity
Color (Text)
Font Size
Font Weight
Size & Spacing
Width
Height
Margin
Padding
Border & Shadow
Border
Box Shadow
Outline
50%