+- QP School (https://qomplainerzschool.lima-city.de)
+-- Forum: Tutorials (https://qomplainerzschool.lima-city.de/forumdisplay.php?fid=3)
+--- Forum: CSS3 Tutorials (https://qomplainerzschool.lima-city.de/forumdisplay.php?fid=5)
+--- Thread: CSS Variable Fonts Animation (/showthread.php?tid=5191)
CSS Variable Fonts Animation - Qomplainerz - 07-26-2023
Description:
You can create smooth font size transitions using CSS transitions and variable fonts.
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS Variable Fonts Animation Example</title>
<style>
.variable-font-text {
font-family: 'Inter Variable', sans-serif;
font-size: var(--font-size, 16px);
transition: font-size 0.3s ease;
}
button {
font-size: 20px;
padding: 10px;
}
</style>
</head>
<body>
<p class="variable-font-text">Variable Fonts are Awesome!</p>
<button onclick="increaseFontSize()">Increase Font Size</button>
<script>
function increaseFontSize() {
const element = document.querySelector('.variable-font-text');
const computedStyle = window.getComputedStyle(element);
const currentFontSize = parseFloat(computedStyle.getPropertyValue('font-size'));
element.style.setProperty('--font-size', `${currentFontSize + 4}px`);
}
</script>
</body>
</html>
Explanation:
In this example, the .variable-font-text paragraph uses the 'Inter Variable' font family, which is a variable font. The font-size property is set using a CSS variable (--font-size). When the button is clicked, the increaseFontSize() JavaScript function increases the font size by 4 pixels, creating a smooth transition due to the transition property. Variable fonts allow for more dynamic control over typography, and with CSS variables, you can create fluid font size animations.