Landing-Page-Animation

Landing-Page-Animation copied to clipboard

Landing Page Animation

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

Example

LIVE DEMO: https://kvaibhav01.github.io/Landing-Page-Animation/

How-to?

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.

That's it! Simple, clean and smooth!

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