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 of landing page animation in your SVG files as shown in the demo. I recommend you to take the W3School's tutorial on the same.

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

• animation: assign a keyframe animation name as monitorIn, duration of 1s, animation type of ease-in-out and animation direction as forwards.
• @keyframes monitorIn: next, use the keyframe rule of from to in order to transform and define translation along Y-axis only setting the opacity accordingly.
• @keyframes chatblips: for the chatblips keyframe, I've used the bounce-in animation sample taken from Angry Tools website. This uses the CSS scale() function to resize the element on 2D plane.

Read this article I wrote to incorporate it in your project.