Landing Page Animation
Create smooth and beautiful landing page animation using only basic CSS animations.
Example
https://kvaibhav01.github.io/Landing-Page-Animation/
LIVE DEMO: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.