jkaan / landing-page-animation

Landing page animation made using CSS

Landing Page Animation

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

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!

TO-DO:

• add glowing type animation while on hover
• add animations to other elements
• change the layout
• make it Materialistic (maybe...)

I've written a supporting blog post on Codeburst publication on Medium.

You can read the complete post and hit a clap or two here!