In today's css animations tutorial, I show you how to animate variable fonts to add subtle movement to your website.
The main CSS property we will cover for the animation is:
font-variation-settings.
Resources:
Movement variable font used in this tutorial:
http://www.nmtype.com/movement/
Source Code:
https://github.com/patriciamolnar/tut...
Sites offering variable fonts:
https://v-fonts.com/
https://fontsarena.com/tag/variable-f...
https://fonts.google.com/variablefonts
Documentation:
https://developer.mozilla.org/en-US/d...
For other CSS animations, check out the following tutorials:
1) Animated Neon Glow Animation with SVG text:
• CSS Animation: Animated Neon Glow with SV...
2) Interactive CSS background animation:
• CSS background animation tutorial - code i...
3) CSS Text animation:
• CSS Text Animation - Animate letters in fr...
For more web development tutorials subscribe:
/ channel
Connect with me on social media:
Twitter: / pmcoding
Instagram: / pmcoding
CodePen: https://codepen.io/patriciamolnar
My website: https://pmcoding.co.uk
Any questions, email me at [email protected]