Landing-Page-Animation
Landing-Page-Animation copied to clipboard
Landing page animation made using CSS
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 asmonitorIn
, duration of1s
, animation type ofease-in-out
and animation direction asforwards
. -
@keyframes
monitorIn
: next, use thekeyframe
rule offrom
to
in order totransform
and definetranslation
along Y-axis only setting theopacity
accordingly. -
@keyframes chatblips
: for thechatblips
keyframe, I've used thebounce-in
animation sample taken from Angry Tools website. This uses the CSSscale()
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.