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 info@pmcoding.co.uk
On this page of the site you can watch the video online CSS Text Animation with Variable Fonts - Variable Fonts Tutorials with a duration of hours minute second in good quality, which was uploaded by the user pmCodingTutorials 04 October 2021, share the link with friends and acquaintances, this video has already been watched 3,424 times on youtube and it was liked by 70 viewers. Enjoy your viewing!