CSS demos

Signature animation

The result:

Steps:

1. Generate a nice handwritten image with Signature.
2. Use a free online service to convert PNG to SVG.
3. Write the code.

SVG attributes:

• stroke-dasharray defines the lengths of dashes and gaps; they alternate.
• stroke-dashoffset defines where the dash pattern starts.

For the animation, set dashArray to the length of the drawn stroke, then use dashOffset to control the blank space at the beginning. Change dashOffset in keyframes to reset it and create the drawing effect.

Tip: remember to get the length of the longest path.

Typewriter effect

Steps:

1. Use animation steps.
2. Use ch and a monospace font.

3D card

Steps:

1. transform-style: preserve-3d;
2. perspective
3. mix-blend-mode: color-dodge;
4. Use JavaScript to track the mouse.
5. transform: rotateX, rotateY

Link: Pokemon

Loading animation

Steps:

1. Create an image mask with mask-image.
2. Reveal the image in steps with mask-size, mask-position, and steps().