Repository files navigation

Create smooth and beautiful landing page animation using only basic CSS animations.

If you know basic CSS along with its animations you can quickly add this type oflanding page animation in yourSVG files as shown in the demo. I recommend you to take theW3School's tutorial on the same.

In your CSS file, you need to have the following:

• animation: assign a keyframe animation name asmonitorIn, duration of1s, animation type ofease-in-out and animation direction asforwards.
• @keyframesmonitorIn: next, use thekeyframe rule offromto in order totransform and definetranslation along Y-axis only setting theopacity accordingly.
• @keyframes chatblips: for thechatblips keyframe, I've used thebounce-inanimation sample taken fromAngry Tools website. This uses the CSSscale() function to resize the element on 2D plane.

Readthis article I wrote to incorporate it in your project.